vue better-scroll插件使用详解
更新时间：2018年01月25日 09:40:31 作者：ALSNEI
本篇文章主要介绍了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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3响应式对象是如何实现的，文章围绕主题展开详细的内容介绍具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commit很多次的时候，{commit} 写法是解构后得到的，这篇文章主要介绍了Vuex Action的{ commit }的写法,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue在H5 项目中使用融云进行实时个人单聊通讯,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了vue后台返回base64图片无法显示的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Element实现表格嵌套、多个表格共用一个表头的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了Vue如何从1.0迁移到2.0的相关资料,需要的朋友可以参考下2017-10-10
本文主要介绍了vue中process.env的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了部属vue项目,访问路径设置非根,显示白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue之彻底理解自定义组件的v-model的相关知识 ,需要的朋友可以参考下的相关资料2017-11-11
最新评论