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

时间：2023-12-23 21:11:43

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()

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

根据官方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

相关文章