首页技术正文

better-scroll 实现tab栏目滑动当前高亮始终在可视区

程序员瑞玲技术 2022年11月19日

0 收藏 768 点赞 5,026 浏览 1019 个字

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>// jsdata:

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