better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
在当前项目目录安装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
})
