Vue 滚动插件 Better-Scroll 使用详解

插件介绍

Better-Scroll 是一款使用原生 JS 实现的插件，专门用于创建滚动效果的插件。
支持 Vue、React、Angular 等主流框架。
优点: 轻量、流畅、具有很好的兼容性、可以自定义样式和配置。

安装

可以使用 npm 安装 Better-Scroll 。

npm install better-scroll --save

基本用法

在 Vue 组件中引用：

<template>
  <div class="wrapper">
    <div ref="scrollWrapper">
      <ul>
        <li v-for="item in list" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    // 初始化 Better-Scroll
    const scroll = new BScroll(this.$refs.scrollWrapper)
  }
}
</script>

高级用法

1. 配置项

Better-Scroll 提供了一系列的配置项，可以在初始化的时候传入。可以使用默认的配置项，也可以自己配置。
可以通过 配置项.probeType 配置 BScroll 监听滚动事件的频率，分为 0、1、2 三个等级，0 表示不监听，1 表示实时监听但有一定的限制（不会派发 scroll 事件），2 是实时滚动监听。

<template>
  <div class="wrapper">
    <div ref="scrollWrapper">
      <ul>
        <li v-for="item in list" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    const scroll = new BScroll(this.$refs.scrollWrapper, {
      probeType: 2 // 实时滚动监听
    })
  }
}
</script>

2. 滚动到指定位置

使用 Better-Scroll 提供的 scrollTo(x, y, time, easing) 方法可以滚动到指定位置。
x 和 y 表示横向和纵向的偏移量。
time 表示滚动的时间，单位是毫秒。
easing 表示运动方式（默认为 cubic-bezier(0.25, 0.46, 0.45, 0.94)）。

<template>
  <div class="wrapper">
    <button @click="handleClick">滚动到底部</button>
    <div ref="scrollWrapper">
      <ul>
        <li v-for="item in list" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    const scroll = new BScroll(this.$refs.scrollWrapper, {
      probeType: 2 // 实时滚动监听
    })
    this.scroll = scroll
  },
  methods: {
    handleClick() {
      // 滚动到底部，执行时间 500 毫秒
      this.scroll.scrollTo(0, this.scroll.maxScrollY, 500)
    }
  }
}
</script>