better-scroll 實現tab欄目滑動當前高亮始終在可視區

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll 

better-scroll文檔地址 

如圖 ，是咱們要實現的功能、

 

 

代碼以下：

　　注意的是 better-scroll初始化的時候可給個延遲，

　　當咱們點擊的時候觸發 iscrollCenter() 記得以後要從新計算scroll 也就是  refresh()// vue 項目

// html
<nav class="nav">
    <div class="nav-box ">
        <ul class="">
            <li :class="{'active': tabs.nowIndex == index}" :data-id="tab.id" v-for="(tab,index) in tabs.options" @click="selectTab(index)">{{ tab.name }}</li>
        </ul>
    </div>
</nav>


// js

data:

　tabs: {

      options: [],

      nowIndex: '首頁傳遞過來的的索引' == -1 ? 0 : '首頁傳遞過來的的索引' + 1

  }

　mounted: 

　　-------

   // 滾動初始化

   setTimeout(() => {

      this.iscroll()

      this.iscrollCenter('首頁傳遞過來的的索引' == -1 ? 0 : '首頁傳遞過來的的索引' + 1)

  }, 0);

methods:
  -------
iscroll() {
    // 初始化
    this.scrollmethod = new BScroll('.nav', {
        eventPassthrough: true,
        scrollX: true,
        scrollY: false,
        preventDefault: false
    })
},

iscrollCenter(val) {
    /*滑動到指定索引的導航節點，並將其顯示在可視區*/                    
    this.scrollmethod.scrollToElement(document.querySelector('.nav-box li:nth-child(' + val + ')'), null, true, true)
    this.scrollmethod.refresh()
},

selectTab(val) {

   　　// TODO

   　　this.tabs.nowIndex = val;

   　　this.iscrollCenter(val++)

　　 }