解决betterScroll在vue中存在图片时,出现拉不动的问题
更新时间：2018年09月27日 11:19:52 作者：Mr航
今天小编就为大家分享一篇解决betterScroll在vue中存在图片时,出现拉不动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1.先写一个图片加载的方法
class ImgLoadClass {
static preloadImages = (arr) => {
//已经加载完的图片数量
let loadeImage = 0
//存放图片的数组
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()
//设置图片src属性
//newImages[i].src = arr[i].slice(5,-2)
newImages[i].src = arr[i]
//图片绑定onload事件，确保加载完成
newImages[i].onload = ()=>{
loadeImage++
//当全部加载完成后，resove
if(loadeImage === arr.length){
resolve()
}
}
newImages[i].onerror = ()=> {
reject()
}
}
}
})
}
}
2.引用该方法，调用成功后再初始化betterScroll
以上这篇解决betterScroll在vue中存在图片时,出现拉不动的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
随着用vue3 的开发者越来越多，其必定是又她一定的有带你，接下来这篇文章小编就为大家介绍vue3 对比 vue2 有什么优点？感兴趣的小伙伴请跟小编一起阅读下文吧2021-09-09
这篇文章主要介绍了不依任何赖第三方,单纯用vue实现Tree 树形控件的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了element-ui中按需引入的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了在vue项目中设置一些全局的公共样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
浅谈vue的iview列表table render函数设置DOM属性值的方法
下面小编就为大家带来一篇浅谈vue的iview列表table render函数设置DOM属性值的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Vue echart实现柱状图,电池图,3D柱图和3D圆柱图代码详解
这篇文章主要为大家介绍了Vue实现echart绘图代码详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
vue3 el-upload单张图片回显、编辑、删除功能实现
这篇文章主要介绍了vue3 el-upload单张图片回显、编辑、删除功能实现,图片回显时隐藏上传区域,鼠标悬浮显示遮罩层进行编辑、删除操作,删除图片后显示上传区域,本文通过实例代码分享实现方法,感兴趣的朋友一起看看吧2023-12-12
使用live-server快速搭建本地服务器+自动刷新的方法
下面小编就为大家分享一篇使用live-server快速搭建本地服务器+自动刷新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
解决router.beforeEach()动态加载路由出现死循环问题
这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
大家都知道,vue是具有单向数据流的传递特性,下面这篇文章主要给大家介绍了关于Vue3中如何修改父组件传递到子组件中值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
最新评论