vue项目笔记（16）-vue滚动插件better-scroll的使用

vue滚动插件better-scroll的使用

在移动端或APP中，我们经常遇到页面中的部分元素需要滚动的情况，这个时候我们就可能需要使用vue插件better-scroll，该插件的使用步骤如下：

1、安装better-scroll

npm install better-scroll --save

2、打开网址：https://github.com/ustbhuangyi/better-scroll，发现在使用better-scroll插件的时候，html结构需要符合以下的情况：

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>

3、在js代码中，需要做以下设置：

<script>
  import Bscroll from 'better-scroll' // 步骤一
  export default{
    name: 'CityList',
    mounted(){
      this.scroll = new Bscroll(this.$refs.wrapper); // 步骤二
    }
  }

4、此时对应的标签已经可以完成滚动了。