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
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()
},

 

版权声明：本文为lanshengzhong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：http://www.cnblogs.com/lanshengzhong/p/7894829.html