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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
PHP的FTP学习(三)
2006/10/09 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
JS中数据结构之栈
2019/01/01 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
PyQt5实现拖放功能
2018/04/25 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python检测网络延迟的代码
2018/05/15 Python
Python类反射机制使用实例解析
2019/12/30 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
社区八一活动方案
2014/02/03 职场文书
连带责任保证书
2014/04/29 职场文书
开票证明
2015/06/23 职场文书
2016入党心得体会范文
2016/01/06 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
JavaScript 定时器详情
2021/11/11 Javascript
Pandas搭配lambda组合使用详解
2022/01/22 Python