解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題
更新時間：2018年09月27日 11:19:52 作者：Mr航
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1.先寫一個圖片加載的方法
class ImgLoadClass {
static preloadImages = (arr) => {
//已經(jīng)加載完的圖片數(shù)量
let loadeImage = 0
//存放圖片的數(shù)組
let newImages = []
//處理存入字符串，取得src部分
//let arr = str.match(/src="(.+)"\s{1}/g)
//返回一個promise對像
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中存在圖片時,出現(xiàn)拉不動的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
隨著用vue3 的開發(fā)者越來越多，其必定是又她一定的有帶你，接下來這篇文章小編就為大家介紹vue3 對比 vue2 有什么優(yōu)點？感興趣的小伙伴請跟小編一起閱讀下文吧2021-09-09
不依任何賴第三方,單純用vue實現(xiàn)Tree 樹形控件的案例
這篇文章主要介紹了不依任何賴第三方,單純用vue實現(xiàn)Tree 樹形控件的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了在vue項目中設(shè)置一些全局的公共樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
下面小編就為大家?guī)硪黄獪\談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue echart實現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實現(xiàn)echart繪圖代碼詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn)
這篇文章主要介紹了vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn),圖片回顯時隱藏上傳區(qū)域,鼠標(biāo)懸浮顯示遮罩層進(jìn)行編輯、刪除操作,刪除圖片后顯示上傳區(qū)域,本文通過實例代碼分享實現(xiàn)方法,感興趣的朋友一起看看吧2023-12-12
使用live-server快速搭建本地服務(wù)器+自動刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動刷新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
解決router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)問題
這篇文章主要介紹了解決router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3中如何修改父組件傳遞到子組件中的值(全網(wǎng)少有!)
大家都知道,vue是具有單向數(shù)據(jù)流的傳遞特性,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何修改父組件傳遞到子組件中值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04