better

2023-03-26 09:44| 来源: 网络整理| 查看: 265

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，如下：

在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

【本文地址】

公司简介

联系我们