better-scroll的用法，及其中的一个属性event._constructed详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了better-scroll的用法，及其中的一个属性event._constructed详解相关的知识，希望对你有一定的参考价值。
better-scroll是一个页面滚动插件，用它可以很方便的实现下拉刷新，锚点滚动等功能。
实现原理：父容器固定高度，并设置overflow：hidden，子元素超出父元素高度后将被隐藏，超出部分可滚动且没有滚动条。
立即使用：
<body> <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> <script type="text/javascript" src="better-scroll.js"></script> <script type="text/javascript"> new BScroll(document.getElementById(‘wrapper‘)); </script> </body>
结合vue使用：
通过npm引入
1. 安装better-scroll
npm install better-scroll
2. 页面中引入better-scroll
import BScroll from ‘better-scroll‘
3. 如果不支持import，可使用
var BScroll =
<div id="wrapper" ref="wrapper"> <ul class="container"> <li>...</li> <li>...</li> ... </ul> </div>
_initScroll() { this.boxScroll= new BScroll(this.$refs.wrapper, { click: true }) },
注意：
better-scroll会将点击事件去掉，如果滚动部分需要有点击事件，需要在参数里加上click：true。
同时，在PC上或某些手机端，由于未成功将touchend事件move掉，点击事件会执行两次。
better-scroll派发的event事件和原生js的event有属性上的区别，其中有一个属性为event._constructed。better-scroll派发的事件中event._constructed为true，原生点击事件中没有这个属性。
selectList(index,event){ if(!event._constructed){//如果不存在这个属性,则为原生点击事件，不执行下面的函数 return } }
由于vue中数据更新是异步的，在dom解构没有加载完成，BScroll无法获取目标容器的高度，会出现无法滚动的现象。
vue中有一个方法可以解决这个问题：$nextTick()
根据官方API的解释可知，一些需要在页面数据变化完成后才执行的函数需要写在$nextTick中 。
this.$nextTick(() => { this._initScroll() })
附better-scroll参数：
- startX: 0 开始的X轴位置
- startY: 0 开始的Y轴位置
- scrollX: true 滚动方向为X轴
- scrollY: true 滚动方向为Y轴
- click: true 是否启用click事件
- directionLockThreshold: 5
- momentum: true 是否开启动量动画，关闭可以提升效率
- bounce: true 是否启用弹力动画效果，关掉可以加速
- selectedIndex: 0
- rotate: 25
- wheel: false 是否监听鼠标滚轮事件
- snap: false 自动分割容器，用于制作走马灯效果等
- snapLoop: false
- snapThreshold: 0.1
- swipeTime: 2500
- bounceTime: 700 弹力动画持续的毫秒数
- adjustTime: 400
- swipeBounceTime: 1200
- deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
- momentumLimitTime: 300
- momentumLimitDistance: 15
- resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔
- preventDefault: true 是否阻止默认事件
- preventDefaultException: { tagName: - /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
- HWCompositing: true 是否启用硬件加速
- useTransition: true 是否使用CSS3的Transition属性，否则使用requestAnimationFram代替
- useTransform: true 是否使用CSS3的Transform属性
- probeType: 1. 滚动的时候会派发scroll事件，会截流。2. 滚动的时候实时派发 - scroll事件，不会截流。 3. 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
参考网站：
https://www.npmjs.com/package/better-scroll better-scroll文档
https://github.com/ustbhuangyi/better-scroll github
以上是关于better-scroll的用法，及其中的一个属性event._constructed详解的主要内容，如果未能解决你的问题，请参考以下文章
项目中遇到的better-scroll的踩坑合集及搜罗的解决办法