vue better-scroll插件使用详解
什么是 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vue分别运用class绑定和style绑定通过点击实现样式切换
这篇文章主要为大家介绍了Vue分别运用class绑定和style绑定通过点击实现样式切换,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07vue基础之v-bind属性、class和style用法分析
这篇文章主要介绍了vue基础之v-bind属性、class和style用法,结合实例形式分析了vue.js中v-bind绑定及class、style样式控制相关操作技巧,需要的朋友可以参考下2019-03-03
最新评论