better-scroll的用法，及其中的一个属性event._constructed详解

2023-07-21 09:49:28

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

码农公寓