解决betterScroll在vue中存在图片时,出现拉不动的问题


Posted in Javascript onSeptember 27, 2018

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中存在图片时,出现拉不动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
js+html制作简单验证码
Feb 16 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 #Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 #Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 #Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 #Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 #Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 #Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
PHP微商城开源代码实例
2019/03/27 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
解决python线程卡死的问题
2019/02/18 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
2014年教师节寄语
2014/04/03 职场文书
财会专业大学生求职信
2014/09/26 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
开学随笔
2015/08/15 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android
Java Spring Lifecycle的使用
2022/05/06 Java/Android
一文解答什么是MySQL的回表
2022/08/05 MySQL