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 = require(‘better-scroll‘)

页面结构：

<div id="wrapper" ref="wrapper">
    <ul class="container">
       <li>...</li>
       <li>...</li>
       ...
    </ul>
</div>

在methods中写一个方法：

 _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详解分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/62230.html