better-scroll

better-scroll 实现纵向或横向滚动。本文主要讲better-scroll在Vue中的体验。
官方介绍：

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

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

安装

npm install better-scroll --save
// or
cnpm intsall better-scroll --save

基本使用

better-scroll 最常见的应用场景是列表滚动，我们来看一下它的 html 结构

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

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

值得提醒一点的是，better-scroll最好直接应用在需要滚动的dom结构外面，如ul/li的外层div，
即<div ref='better-scroll'> ul -li </div>；
又如，table/tbody,
即 <div ref='better-scroll'> <table> <tbody v-for=""></tbody> </table></div>
或<div ref='better-scroll'> <div> <p v-for=""></p> </div></div>

===> 放在需要滚动的结构的外层，或者说放在Vue v-for渲染的外层。

===> HTML 两点需要注意

1. `better-scroll`下只能有一个大的`div`，就如`react`中的`render`只能`return`回一个大的`div`
2. `better-scroll`放在需要滚动的结构的外层，或者说放在`Vue v-for`渲染的外层

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

合并起来：

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
     <!-- li的渲染用v-for来实现 -->
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    mounted() {
      this.$nextTick(() => { //需要异步处理，即在v-for数据赋值的时候
        this.scroll = new BScroll(this.$refs.wrapper, {})
      })
    }
  }
</script>