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++)
}