BetterScroll 是什么

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

BetterScroll 2.x

安装

这里安装1.x

npm install better-scroll -S # install 1.x
npm install better-scroll@next -S # install 2.x，该版本带有所有插件的能力。

能力的滚动

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

  import BScroll from 'better-scroll'

  const bs = new BScroll('#scroll-wrapper', {
    pullUpLoad: true,
    pullDownRefresh: true,
    scrollbar: true,
    // 等等
  })

案例

<template>
  <div class="list wrapper">
    <div>
      <div class="area">
      <div class="title">当前城市</div>
      <div class="cityBtn">
        <div class="cityItem">北京</div>
      </div>
      </div>
      <div class="area">
        <div class="title">热门城市</div>
        <div class="cityBtn">
          <div class="cityItem">北京</div>
          <div class="cityItem">上海</div>
          <div class="cityItem">武汉</div>
          <div class="cityItem">重庆</div>
          <div class="cityItem">成都</div>
        </div>
      </div>
      <div class="area">
        <div class="title">A</div>
        <ul class="city">
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
        </ul>
      </div>
      <div class="area">
        <div class="title">B</div>
        <ul class="city">
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
          <li>阿拉尔</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  mounted () {
    this.scroll = new BScroll('.wrapper', {
      pullUpLoad: true
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
  .list
    position absolute
    top 1.76rem
    left 0
    right 0
    bottom 0
    z-index -1
    .title
      height .5rem
      line-height .5rem
      border-bottom 1px solid #ccc
      color #666
      background #dfdfdf
      padding-left .2rem
      font-size .28rem
    .cityBtn
      display flex
      margin .2rem
      flex-wrap wrap
      .cityItem
        width: 1.8rem;
        font-size .28rem
        border 0.02rem solid #bbb
        padding .1rem
        border-radius 0.06rem
        text-align center
        margin .1rem
    .city
      li
        font-size .28rem
        line-height .72rem
        color #666
        margin 0 .2rem
        border-bottom .02rem solid #ddd
</style>

这里要注意