vue better-scroll插件使用详解


Posted in Javascript onJanuary 25, 2018

什么是 better-scroll

better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。

在需要的文件中添加

import BScorll from 'better-scroll';

引用的示例代码:

let scroll = new BScroll(Dom对象, {//options
 startX: 0,
 startY: 0
})

Vue获得Dom对象方法,

<div v-el:food-wrapper></div>//定义对象
this.$els.foodWrapper//获取对象

(Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象)

为了解决上面的问题,运用Vue的nextTick();

(简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码。)

// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

问题:

PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,

方法:在点击时,传 $event变量,Better-scroll插件中的 event事件和原生 js的 event有属性上得区别,Better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,

selectMenu(index,event){
  if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
    return;
  }
}

使用手册:https://github.com/ustbhuangyi/better-scroll

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
js常用代码段收集
Oct 28 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
vue自动化表单实例分析
May 06 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 #jQuery
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 #Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 #Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 #Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 #Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 #Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 #Javascript
You might like
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
php合并js请求的例子
2013/11/01 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
Python的设计模式编程入门指南
2015/04/02 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
详解python中的 is 操作符
2017/12/26 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python变量的存储原理详解
2019/07/10 Python
python分布式编程实现过程解析
2019/11/08 Python
python如何实现DES加密
2020/09/21 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
参观监狱心得体会
2014/01/02 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
委托书范本
2014/04/02 职场文书
爱护公物演讲稿
2014/09/09 职场文书
户外活动总结
2015/02/04 职场文书
手术室消毒隔离制度
2015/08/05 职场文书