在vue项目中使用BetterScroll插件(1)-滚动列表

一、背景需求

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件
它的核心灵感来自于 iscroll 的实现
它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化

在一个以长列表为主要内容的vue页面中
我们希望用户在划到底部或划回顶部时 页面呈现弹性的动态效果
这就需要借助 better-scroll 插件来实现

二、安装和引入

参照 better-scroll 的官方文档
全局安装

npm install better-scroll --save

在子组件中局部引入

import BScroll from 'better-scroll'

三、基础用法

最常见的应用场景是列表滚动，HTML结构如下：

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

要注意的是 BetterScroll作用在外层的wrapper容器上
并且只处理wrapper第一个子元素的滚动

在子组件的mounted生命周期钩子中
传入对应的DOM元素，实例化 Bscroll 对象

export default {
  name: ' ',
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}