vue中使用BetterScroll（个人）

  欢迎大家沟通交流，如果有不懂，可以及时留言。

好的链接

better-scroll写导航

html布局

<div class="nav" ref="nav">

　　<ul class="readbook-content" ref="readbookContent">

　　　　<li v-for="(item,index) in list"   @click="selectMenu(index)"></li>

　　</ul>

</div>

 

css

.nav{
100%;

overflow:hidden;

}

.readbook-content {

　　a {

　　display: inline-block;

　　 60px;

　　text-align: center;

　　float: left;

　　color: #2A2A2A;

　　}

　　.router-link-exact-active{

　　　　color: #29B0E7;

　　}

}

js实力化 

import BScroll from 'better-scroll';

export default {

　　data(){

　　　　return{

　　　　　　Scroll:{},//better-scroll

　　　　　　options = {//参数

　　　　　　　　scrollX: true,

　　　　　　　　click: true,

　　　　　　　　tap: true,

　　　　　　　　probeType: 3,

　　　　　　　　useTransition:false, // 防止iphone微信滑动卡顿

　　　　　　},

　　　　}

　　},

　　created(){　　　

　　　　this.Scroll = new BScroll(this.$refs.nav, this.options)//滚动初始化

　　}，

　　methods:{

　　　　selectMenu: function (index) {

　　　　　　//自己默认派发事件时候(BScroll),_constructed被置为true,但是浏览器原生并没有这个属性

　　　　　　if (!event._constructed) {

　　　　　　　　return;

　　　　　　}

　　　　　　//运用BScroll接口，滚动到相应位置

　　　　　　let foodList = this.$refs.nav.getElementsByClassName('readbook-content')[0].children;

　　　　　　//获取对应元素的列表

　　　　　　let el = foodList[index];

　　　　　　//设置滚动时间

　　　　　　this.scroll.scrollToElement(el, 300, true);

　　　　},

　　}

}