vue-头部tab左右滑动，单个tab始终居中

我们在开发的时候，总是会遇到tab栏左右滑动，单个内容始终居中的需求，那么我们该如何开发出来呢？首先，先看需求效果：

首先：我们先将头部样式写出来。第一头，部固定，yx轴不可滑动；第二，再写一个div，使其可y轴滑动，然后使用flex布局，不可换行，里面在加上单个tab。第三，单个tab，使用flex属性，不可扩展、不可收缩、宽度使用百分比；

其次：如上样式即可写出，tab可滑动，但是点击tab没有居中效果，接下来就使用js控制。第一，得到外层滑动的div节点，用来控制它距边框左边滑动的距离；第二，获得单个tab节点，使其居中，获得居中时左侧距离边框左边的距离，以及左侧距离div滑块左侧的距离。第三，用tab距滑块左侧距离-tab距可视边框左侧距离，得出div滑块的滚动距离。

部分源码如下：

vue

<div class="tab">
        <div class="tab-model">
                <div
                        class="model" 
                        v-for="(item,index) in tabList" 
                        :key="index"
                        @click="tabChange(index,item)"
                        :class="active===index ? 'active':''"
                >
                        {{item.type}}
                </div>
        </div>
</div>

less

.tab{
        width: 100%;
        padding: 12/100rem 12/100rem 0;
        box-sizing: border-box;
        border-bottom: 1/100rem solid #f6f6f6;
        overflow: hidden;
        >div{
                overflow: hidden;
                overflow-x: auto;
                display: flex;
                align-items: center;
                transition: .3s;
                &::-webkit-scrollbar{
                        display: none;
                }
                >div{
                        // flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
                        // flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
                        // flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
                        // 点睛之笔
                        flex: 0 0 30%;
                        cursor: pointer;
                        border-radius: 4/100rem;
                        border: 1/100rem solid #d9d8d8;
                        padding: 6/100rem 12/100rem;
                        box-sizing: border-box;
                        margin-right: 12/100rem;
                        margin-bottom: 12/100rem;
                        text-align: center;
                        transition: .3s;
                        &.active{
                                border: 1/100rem solid #F27306;
                                color: #F27306;
                        }
                        &:nth-child(1){
                                flex: 0 0 20%;
                        }
                        &:nth-child(2){
                                flex: 0 0 20%;
                        }
                        &:nth-child(5){
                                flex: 0 0 20%;
                        }
                }
        }
}

js

// tab切换
tabChange(index,data){
        this.active = index;
        // ---------
        this.$nextTick(()=>{
                this.setCentert();
        })
},
setCentert() {
        // 外层整个tab
        let container = document.querySelector('.tab-model')
        // 单个tab
        let activeNode = document.querySelector('.model.active')
        // 元素距离滑块左边距离  -  居中时元素到窗口左边距离  =  滚动条滑动的距离
        let scrollWidth = activeNode.offsetLeft - (document.body.clientWidth-activeNode.clientWidth)/2
        container.scrollLeft = scrollWidth;
},

如上操作，便可实现固定tab滑动，点击tab居中，此外还可加过渡属性，使其点击变色、淡出等。