better-scroll插件

时间：2022-03-31 02:29:24

参考网址：慕课网  http://coding.imooc.com/lesson/74.html#mid=1640

这个详细：https://zhuanlan.zhihu.com/p/25369923

参考：https://github.com/ljcGitHub/better-scroll

api: https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll 是什么

移动端上下滚动插件

 // 在pc端，会触发原生点击事件，better-scroll里面，点击事件多了一个_constructed属性，所以可以用下面的方法来

         // 判断，现在是better-scroll点击事件

         if (!event._constructed) {

           return

         }

转载自： http://blog.csdn.net/myfuture_mydream/article/details/63359463

实现原理：父容器固定高度，并设置属性overflow: hidden，使得子元素高度超出容器后能被隐藏。better-scroll作用在父容器上。
1、npm安装better-scroll插件。npm install--save better-scroll
2、在文件中引入better-scroll。import BScroll from 'better-scroll';
用法：
new BScroll(Dom对象,{//opsitons});
在Vue中要获得Dom对象，需设置标签属性‘v-el’。
例如：<div v-el:betterscroll></div>
获取dom对象，this.$els.betterscroll
为了让子元素能被点击，需设置click:true.并可接受此点击事件@click="info($index,$event)"better-scroll插件
注意：Vue中数据更新是异步的，在数据还没有加载完之前，BScroll是无法获取目标内容容器的高度的，就会出现无法滚动的现象。
这里可以用$nextTick()解决。
vue官方是这样说明的
better-scroll插件
nextTick应该被用在某些计算属性或者watch再或者某个按钮click事件绑定的methods当中。这时，nextTick才能保证你的数据更新完成之后再执行你绑定的函数。
实例用法：
better-scroll插件
注意：在PC上，点击事件会执行两次。由于better-scroll派发的事件有event_constructed:true属性。可以进行处理。
better-scroll插件

备注：

（1）、这几天项目中发现个问题，min-height为1，经过测试发现是样式的问题，结论是：在使用better-scroll的页面，最外层的div，必须设置样式为全屏

 position: fixed;

 z-index: ;

 top: ;

 bottom: ;

 left: ;

 right: ;

相关文章