解決betterScroll在vue中存在圖片時(shí),出現(xiàn)拉不動(dòng)的問(wèn)題
更新時(shí)間：2018年09月27日 11:19:52 作者：Mr航
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時(shí),出現(xiàn)拉不動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
1.先寫一個(gè)圖片加載的方法
class ImgLoadClass {
static preloadImages = (arr) => {
//已經(jīng)加載完的圖片數(shù)量
let loadeImage = 0
//存放圖片的數(shù)組
let newImages = []
//處理存入字符串，取得src部分
//let arr = str.match(/src="(.+)"\s{1}/g)
//返回一個(gè)promise對(duì)像
return new Promise((resolve,reject)=>{
for (let i=0;i < arr.length;i++){
for(let i = 0; i < arr.length; i++){
newImages[i] = new Image()
//設(shè)置圖片src屬性
//newImages[i].src = arr[i].slice(5,-2)
newImages[i].src = arr[i]
//圖片綁定onload事件，確保加載完成
newImages[i].onload = ()=>{
loadeImage++
//當(dāng)全部加載完成后，resove
if(loadeImage === arr.length){
resolve()
}
}
newImages[i].onerror = ()=> {
reject()
}
}
}
})
}
}
2.引用該方法，調(diào)用成功后再初始化betterScroll
以上這篇解決betterScroll在vue中存在圖片時(shí),出現(xiàn)拉不動(dòng)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Electron相當(dāng)于一個(gè)瀏覽器的外殼，可以把網(wǎng)頁(yè)程序嵌入到殼里面，可以運(yùn)行在桌面上的一個(gè)程序，可以把網(wǎng)頁(yè)打包成一個(gè)在桌面運(yùn)行的程序。這篇文章主要介紹了electron-vue多顯示屏下將新窗口投放是其他屏幕 ,需要的朋友可以參考下2019-07-07
vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
keep-alive是Vue中一個(gè)非常有用的特性,它可以幫助我們避免重復(fù)渲染和減少組件的渲染次數(shù),從而提高應(yīng)用程序的性能,本文給大家介紹keep-alive組件緩存的相關(guān)知識(shí),感興趣的朋友一起看看吧2024-01-01
關(guān)于vue中根據(jù)用戶權(quán)限動(dòng)態(tài)添加路由的問(wèn)題
每次路由發(fā)生變化時(shí)都需要調(diào)用一次路由守衛(wèi)，并且store中的數(shù)據(jù)會(huì)在每次刷新的時(shí)候清空，因此需要判斷store中是否有添加的動(dòng)態(tài)路由，本文給大家分享vue中根據(jù)用戶權(quán)限動(dòng)態(tài)添加路由的問(wèn)題，感興趣的朋友一起看看吧2021-11-11
本篇文章主要介紹了手把手教你使用vue-cli腳手架(圖文解析)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue的全選組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
詳解利用eventemitter2實(shí)現(xiàn)Vue組件通信
這篇文章主要介紹了詳解利用eventemitter2實(shí)現(xiàn)Vue組件通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue?@click?@tap重疊事件區(qū)分方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
在項(xiàng)目開發(fā)中,經(jīng)常會(huì)用到svg圖標(biāo),之前用的都是vue-svg-icon,接下來(lái)通過(guò)本文給大家介紹Vue中使用SVG-ICON的配置方法,感興趣的朋友跟隨小編一起看看吧2024-02-02
Vue項(xiàng)目使用svg圖標(biāo)實(shí)踐
這篇文章主要介紹了Vue項(xiàng)目使用svg圖標(biāo)實(shí)踐，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09