better-scroll|用于移动端滚动的js插件


源码介绍

简要教程

better-scroll是一个用于移动端滚动的插件,它的重点解决移动端(已支持 PC)各种滚动场景需求。better-scroll是使用纯 JavaScript 实现的,没有任何第三方无依赖。

使用方法

以下是如何在Vue项目中使用better-scroll。

安装

在项目中使用npm安装better-scroll插件,命令如下:

npm install --save better-scroll
		
使用

在需要使用的组件中,使用import语句引入better-scroll插件,如下:

import BScroll from 'better-scroll'
		

在外部包裹一层div。根据better-scroll官方要求,在需要滚动的组件外,必须要包裹一层div,如下:

<div class="wrapper">
  <div class="content">
    <!-- 这里是需要滚动的内容 -->
  </div>
</div>
		

在mounted生命周期中初始化better-scroll。在需要滚动的组件中,在mounted生命周期中使用new BScroll()初始化better-scroll,如下:

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper, {
    // 这里是一些配置参数,如probeType等
  })
}
		

以上就是使用better-scroll在Vue项目中实现滚动的步骤。需要注意的是,better-scroll的配置参数和具体使用方法还有很多。

配置参数

better-scroll常用配置参数:

  • startX: 默认值:0。 表示X轴方向初始化位置。
  • startY: 默认值:0。 表示Y轴方向初始化位置。
  • scrollY: 默认值:false。当设置为 true 的时候,可以开启纵向滚动。当设置 eventPassthrough 为 'horizontal' 的时候,该配置无效。
  • scrollX: 默认值:true。 当设置为 true 的时候,可以开启横向滚动。当设置 eventPassthrough 为 'horizontal' 的时候,该配置无效。
  • freeScroll: 默认值:false。在默认情况下,由于人的手指无法做到绝对垂直或者水平的运动,因此在一次手指操作的过程中,都会存在横向以及纵向的偏移量,内部默认会摒弃偏移量较小的一个方向,保留另一个方向的滚动。但是在某些场景我们需要同时计算横向以及纵向的手指偏移距离,而不是只计算偏移量较大的一个方向,这个时候我们只要设置 freeScroll 为 true 即可。当设置 eventPassthrough 不为空的时候,该配置无效。
  • directionLockThreshold: 默认值为5,当 freeScroll 为 false 的情况,我们需要锁定只滚动一个方向的时候,我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差,当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。当设置 eventPassthrough 的时候,directionLockThreshold 设置无效,始终为 0。
  • eventPassthrough:默认值为''。可选值:'vertical' | 'horizontal'。有时候我们使用 BetterScroll 在某个方向模拟滚动的时候,希望在另一个方向保留原生的滚动(比如轮播图,我们希望横向模拟横向滚动,而纵向的滚动还是保留原生滚动,我们可以设置 eventPassthrough 为 vertical;相应的,如果我们希望保留横向的原生滚动,可以设置eventPassthrough为 horizontal)。
  • click:默认值为 false。BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true,BetterScroll 会派发一个 click 事件。
  • dblclick:默认值为 false。派发双击点击事件。当配置成 true 的时候,默认 2 次点击的延时为 300 ms,如果配置成对象可以修改 delay。
  • tap:默认值为''。因为 BetterScroll 会阻止原生的 click 事件,我们可以设置 tap 为 'tap',它会在区域被点击的时候派发一个 tap 事件,你可以像监听原生事件那样去监听它。
  • probeType:默认值为0,可选值为1/2/3。它决定是否派发 scroll 事件,对页面的性能有影响,尤其是在 useTransition 为 true 的模式下。派发 scroll 的场景分为两种:
    • 1. 手指作用在滚动区域(content DOM)上;
    • 2. 调用 scrollTo 方法或者触发 momentum 滚动动画(其实底层还是调用 scrollTo 方法)

    对于 v2.1.0 版本,对 probeType 做了一次统一:

    • 1. probeType 为 0,在任何时候都不派发 scroll 事件,
    • 2. probeType 为 1,仅仅当手指按在滚动区域上,每隔 momentumLimitTime 毫秒派发一次 scroll 事件,
    • 3. probeType 为 2,仅仅当手指按在滚动区域上,一直派发 scroll 事件,
    • 4. probeType 为 3,任何时候都派发 scroll 事件,包括调用 scrollTo 或者触发 momentum 滚动动画

更多的配置参数请参考:https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html

常用方法

  • refresh():重新计算 BetterScroll,当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
  • scrollTo(x, y, time, easing, extraTransform):相对于当前位置偏移滚动 x,y 的距离。x: X轴位置;y: Y轴位置;time: 到达指定位置所需时间,单位ms;easing: 动画函数。
  • scrollBy(x, y, time, easing):相对于当前位置偏移滚动 x,y 的距离。x: 当前位置偏移X轴的距离;y: 当前位置偏移Y轴的距离;time: 到达偏移位置所需时间,单位ms ;easing: 动画函数。
  • scrollToElement(el, time, offsetX, offsetY, easing):滚动到指定的目标元素。 el: 目标元素;time: 到达目标元素所需时间,单位ms; offsetX: 距离目标元素所偏移X轴的距离;设置为true时,到达目标元素中心位置;offsetY: 距离目标元素所偏移Y轴的距离;设置为true时,到达目标元素中心位置;easing: 动画函数。

github网址:https://github.com/ustbhuangyi/better-scroll



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部