better-scroll插件
参考网址:慕课网 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 是什么
移动端上下滚动插件
1 // 在pc端,会触发原生点击事件,better-scroll里面,点击事件多了一个_constructed属性,所以可以用下面的方法来 2 // 判断,现在是better-scroll点击事件 3 if (!event._constructed) { 4 return 5 }
转载自: 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)"
注意:Vue中数据更新是异步的,在数据还没有加载完之前,BScroll是无法获取目标内容容器的高度的,就会出现无法滚动的现象。
这里可以用$nextTick()解决。
vue官方是这样说明的
nextTick应该被用在某些计算属性或者watch再或者某个按钮click事件绑定的methods当中。这时,nextTick才能保证你的数据更新完成之后再执行你绑定的函数。
实例用法:
注意:在PC上,点击事件会执行两次。由于better-scroll派发的事件有event_constructed:true属性。可以进行处理。
备注:
(1)、这几天项目中发现个问题,min-height为1,经过测试发现是样式的问题,结论是:在使用better-scroll的页面,最外层的div,必须设置样式为全屏
1 position: fixed; 2 z-index: 200; 3 top: 0; 4 bottom: 0; 5 left: 0; 6 right: 0;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步