vue中如何使用better-scroll插件-创想鸟

本篇文章主要介绍了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对象方法,


//定义对象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;  }}

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

在jQuery中如何解决niceScroll滚动条错位问题

以上就是vue中如何使用better-scroll插件的详细内容，更多请关注【创想鸟】其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

vue中如何使用better-scroll插件