vue.js使用better-scroll实现滚动

better-scroll是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现是一个页面滚动插件，通常在子容器高度超过固定的父容器高度时使用。是基于原生 JS 实现的，不依赖任何框架

效果展示：

vue.js使用better-scroll来实现滚动

一、适用的页面结构：

<div ref="wrapper" class="wrapper">
    <ul class="content">
    <li v-for="(item,index) of ms" :key=item.index>{{item.c}}</li>
    </ul>
</div>

注意：父容器固定高度，并设置overflow：hidden，子元素超出父元素高度后将被隐藏，超出部分可滚动并且且没有滚动条。

css样式：

.wrapper
    height 545px
    overflow hidden
    position absolute
    top 2rem
    right 0
    left 0
    // background-color yellow
    ul
      line-height 32px
      width 100%
      padding-bottom 1rem
      // background-color red
      li
        font-size 16px
        transition-duration 1200ms

二、用法：
1、安装better-scroll

npm install better-scroll --save

2、在组件局部引入better-scroll

import BScroll from 'better-scroll'

3、使用better-scroll

this.scroll = new BScroll(this.$refs.wrapper)

推荐：当使用axios接了后端接口的数据时，推荐在mounted()中这样写：

this.$nextTick(() => {
  // 解决移动端因vue数据更新异步而无法滚动的问题
  this.scroll = new BScroll(this.$refs.wrapper, {
    click:true, //设置click参数，使其可点击
    adjustTime: 350 // 拉动之后的返回时间，默认400
  })
})

不足可参考https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#%E8%B5%B7%E6%AD%A5