解决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中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
js Dom实现换肤效果
Oct 21 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vuex分模块后,实现获取state的值
Jul 26 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程序员工具
2008/05/26 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
基于Python的PIL库学习详解
2019/05/10 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
django 实现简单的插入视频
2020/04/07 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
化学系大学生自荐信范文
2014/03/01 职场文书
欢迎新生标语
2014/10/06 职场文书
农村党员干部承诺书
2015/05/04 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript