解决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 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Angular4编程之表单响应功能示例
Dec 13 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 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中的一个中文字符串截取函数
2007/02/14 PHP
php minixml详解
2008/07/19 PHP
PHP 函数学习简单小结
2010/07/08 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript一点特殊用法
2008/05/28 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
Vue精简版风格概述
2018/01/30 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Python远程linux执行命令实现
2020/11/11 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
初中班主任评语大全
2014/04/24 职场文书
合理化建议书范文
2015/09/14 职场文书
情况说明书格式及范文
2019/06/24 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python