解决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开发技术大全-第1章javascript概述
Jul 03 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
js+css实现导航效果实例
Feb 10 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
jQuery实现元素的插入
Feb 27 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
jquery事件与函数的使用介绍
2013/09/29 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
在Python中调用ggplot的三种方法
2015/04/08 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python编写Logistic逻辑回归
2020/12/30 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
使用Python的turtle模块画国旗
2019/09/24 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
质检部经理岗位职责
2014/02/19 职场文书
亮化工程实施方案
2014/03/17 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书