vue better-scroll插件使用详解

　　

<强>什么是better-scroll
　　

　　

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

　　

在需要的文件中添加
　　

　　 　　 　　从“better-scroll”进口BScorll; 之前 　　 　　

引用的示例代码:
　　

　　 　　 　　让滚动=new BScroll (Dom对象,{//选项 　　startX: 0, 　　startY: 0 　　}) 　　 　　

Vue获得Dom对象方法,
　　

　　 　　 　　& lt; div v-el: food-wrapper> & lt;/div>//定义对象 　　els.foodWrapper美元。//获取对象 　　 　　

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

　　

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

　　

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

　　 　　//DOM还没有更新 　　Vue。nextTick(函数(){//DOM更新了 　　}) 　　 　　

<强>问题:
　　

　　

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

　　

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

　　 　　 　　selectMenu(指数、事件){ 　　如果(! event._constructed){//如果不存在这个属性,则不执行下面的函数 　　返回; 　　} 　　} 　　之前 　　 　　

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

　　

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

vue better-scroll插件使用详解