在vue中使用better-scroll学习

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

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

better-scroll的介绍

better-scroll的事例

better-scroll的github

在当前项目目录安装better-scroll:

npm install better-scroll --save

HTML需要符合以下结构：

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

1、在script中引入better-scroll(使用ref获取document）

<script>
import Bscroll from 'better-scroll'
export default {
   mounted () {
       this.scroll = new Bscroll(this.$refs.search, {
          click: true
       })
    }
  }
</script>

2、或者直接使用document

<script>
import Bscroll from 'better-scroll'
export default {
   mounted () {
       this.scroll = new Bscroll(document.querySelector('.wrapper'), {
          click: true
       })
    }
  }
</script>

betterScroll创建的区域，最近版本默认是不支持点击的，如果需要点击，创建betterScroll 的时候加一个参数即可：

new Bscroll(this.$refs.wrapper, {
click: true
})