移动端tab导航栏（切换底部条滑动，超过5个居中滑动）

GIF.gif

通过在列表底部加一个div，实现底部滑动条跟随滑动
所有代码

<template>
    <div class="list-content">
        <div class="list-content-hidden">
            <ul
                class="menu-list"
                ref="scrollUl"
            >
                <li
                    class="li"
                    v-for="(item,index) in list"
                    :class="activeIndex == index ? 'active' : ''"
                    @click="checkMenuList(index,item.id)"
                    :id="'menuli'+index"
                >
                    <div :id="'menu'+index">{{item.name}}</div>
                </li>
                <div
                    class="hr"
                    ref="menuHR"
                ></div>
            </ul>
        </div>

    </div>
</template>
<script lang="ts">
import { Component, Mixins, Watch, Prop } from 'vue-property-decorator';
@Component({
})
export default class Tablist extends Mixins() {
    activeIndex = 0;
    list: any = [
        { id: 1, name: '一一' },
        { id: 2, name: '二二' },
        { id: 3, name: '三三' },
        { id: 4, name: '四四' },
        { id: 5, name: '五五' },
        { id: 6, name: '六六' },
        { id: 6, name: '七七' },
        { id: 6, name: '八八' },
        { id: 6, name: '九九' },
    ];
    // 点击切换数据
    checkMenuList(index, id) {
        this.activeIndex = index;
        this.$nextTick(() => {
            // 获取被点击的div，并且把div的宽度给滑动条
            let menuli: any = document.getElementById('menu' + index);
            let liclientWidth = menuli.clientWidth;
            (this.$refs as any).menuHR.style.width = liclientWidth + 'px';
            // 设置滑动条距离左边的距离等于当前div距离左边的距离
            (this.$refs as any).menuHR.style.left = menuli.offsetLeft + 'px';
            // 所有菜单个数
            let total: any = (this.list as any).length;

            let scrollUl = this.$refs.scrollUl;
            // 找到当前选择 和前后2个div 保持这5个一直在可视区域
            let menuliben: any = document.getElementById('menuli' + index);
            let menulipre: any = document.getElementById('menuli' + (index - 1));
            let menulipre2: any = document.getElementById('menuli' + (index - 2));
            let menulinext: any = document.getElementById('menuli' + (index + 1));
            let menulinext2: any = document.getElementById('menuli' + (index + 2));

            // scrollUl.scrollLeft = menuliben.offsetLeft;
            if (index == 0) { // 第一个
                menuliben.scrollIntoView();
            } else if (index == 1) { // 第二个
                menuliben.scrollIntoView();
                menulipre.scrollIntoView();
                menulinext.scrollIntoView();
                menulinext2.scrollIntoView();
            } else if (index == total - 2) { // 倒数第二个
                menuliben.scrollIntoView();
                menulipre.scrollIntoView();
                menulipre2.scrollIntoView();
                menulinext.scrollIntoView();
            } else if (index == total - 1) { // 倒数第一个
                menuliben.scrollIntoView();
                menulipre.scrollIntoView();
                menulipre2.scrollIntoView();
            } else { // 其他
                menuliben.scrollIntoView();
                menulipre.scrollIntoView();
                menulipre2.scrollIntoView();
                menulinext.scrollIntoView();
                menulinext2.scrollIntoView();
            }
        });
    }
}
</script>
<style lang="scss" scoped>
.list-content {
    width: 100%;
}
.list-content-hidden {
    width: 100%;
    padding: 0 0.25rem;
    overflow: hidden;
    height: 0.88rem;
    display: flex;
    align-items: flex-end;
}
.hr {
    width: 0.65rem;
    height: 0.06rem;
    background: var(--theme1);
    position: absolute;
    left: 0.38rem;
    bottom: 0.01rem;
    transition: 0.2s all linear;
    border-radius: 0.03rem;
}
.menu-list {
    white-space: nowrap;
    overflow-x: scroll;
    width: auto;
    position: relative;
    flex: 1;
    &::-webkit-scrollbar {
        display: none;
    }
    .li {
        height: 0.7rem;
        line-height: 0.7rem;
        width: 1.4rem;
        text-align: center;
        display: inline-block;
        font-size: 0.32rem;
        color: rgba(0, 0, 0, 0.9);
        cursor: pointer;
        &.active {
            color: $theme1;
            color: var(--theme1);
            font-weight: bold;
            font-size: 0.36rem;
        }
        div {
            display: inline-block;
        }
    }
}
</style>