首页 > 代码库 > better-scroll的用法，及其中的一个属性event._constructed详解
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详解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。