1.BetterScroll 是什么

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

2.安装

2.1 部分安装

//安装
npm install @better-scroll/core --save
//引入
import BScroll from '@better-scroll/core'
//使用
let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})

2.2 安装具备所有插件能力的 BetterScroll

// 安装
npm install better-scroll --save
//引入
import BetterScroll from 'better-scroll'
//使用
let bs = new BetterScroll('.wrapper', {})

2.3 全能力的滚动

如果你觉得一个个引入插件很费事，我们提供了一个拥有全部插件能力的 BetterScroll 包。它的使用方式与 1.0 版本一模一样，但是体积会相对大很多，推荐按需引入。

import BScroll from 'better-scroll'

let bs = new BScroll('.wrapper', {
  // ...
  pullUpLoad: true,
  wheel: true,
  scrollbar: true,
  // and so on
})

3.使用

<template>
    <div class="wrapper" ref="wrapper">
        <ul class="content">
            <li>...</li>
            <li>...</li>
        </ul>
        <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>
</template>

<script>
    import BetterScroll from 'better-scroll'
    // import { onMounted} from 'vue'
    export default {
        name: 'App',
        methods: {
            createBScoll() {
                let scroll = new BetterScroll(this.$refs.wrapper, {
                    // pullUpLoad: true
                    // wheel: true,
                    ScrollY: true, //y轴滚动
                });
            }
        },
        mounted() {
            this.createBScoll();
        },
    }
</script>
<style>
    .wrapper {
        height: 100px;
        width: 100px;
        overflow: hidden;
        background-color: aqua;
    }

    .content {
         /*注意：最小高度要大于等于父元素高度*/
        min-height: 100px;  
        /* width: 100px; */
    }
</style>

4. 常用API

scrollToElement(el, time, offsetX, offsetY, easing)
参数：
{DOM | string} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。
{number} time 滚动动画执行的时长（单位 ms）
{number | boolean} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{number | boolean} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 packages/shared-utils/src/ease.ts 里的写法
返回值：无
作用：滚动到指定的目标元素。

例子：根据不同元素滚动

mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true
    })
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  },