vue-cli中使用better-scroll

安装

npm install better-scroll --save

html 结构

以横向滚动为例
ul是滑动区域 外面必须要用一个div包裹才行 并且需要设置div宽度为100%

 <div ref="bscroll" class="bscroll">
   <ul class="tab">
      <li>首页</li>
      <li>体育</li>
      <li>游戏</li>
      <li>音乐</li>
      <li>娱乐</li>
      <li>视频</li>
    </ul>
  </div>

在组件中使用

<script>
import BScroll from 'better-scroll'
export default {
 mounted(){
	this.$nextTick(()=>{ //使用 this.$nextTick 为了确保组件已经渲染完毕
	     this.scroll = new BScroll(this.$refs.bscroll,{
	         click: true, //允许点击 默认是false
	         scrollX: true  // scrollX: true 允许横向滚动 默认是false
	         //还有很多课配置参数 见官方文档http://ustbhuangyi.github.io/better-scroll/doc/options.html
	       })
	  	})
	 }
   }
</script>