解决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吗?
Feb 24 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
javascript如何实现create方法
Nov 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python实现多行注释的另类方法
2014/08/22 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
NumPy 数组使用大全
2019/04/25 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
python绘制汉诺塔
2021/03/01 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
空中乘务员岗位职责
2014/03/08 职场文书
读书演讲主持词
2014/03/18 职场文书
保护环境倡议书300字
2014/05/19 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
数学教师求职信范文
2015/03/20 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
详解Vue3使用axios的配置教程
2022/04/29 Vue.js