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{
width:100%;

overflow:hidden;

}

.readbook-content {

　　a {

　　display: inline-block;

　　width: 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);

　　　　},

　　}

}