Better-scroll的使用方法

better-scroll 是什么

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

github地址：https://github.com/ustbhuangyi/better-scroll

演示地址：http://ustbhuangyi.github.io/better-scroll/#/examples/zh

文档说明：https://ustbhuangyi.github.io/better-scroll/doc/

better-scroll安装

npm install better-scroll --save

better-scroll使用

better-scroll的dom结构

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

上面的代码中 better-scroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动，其它的元素都会被忽略。

dom结构一定要符合better-scroll的要求

1、为最外层div加一个ref属性

<div class="list" ref="wrapper">

2、组件中引入better-scroll

import Bscroll from 'better-scroll'

3、生命周期函数mounted 

mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
}