顶部选项卡参数计算

顶部选项卡参数计算(实现效果，选中的元素居中显示

vue的项目、这两天写到一个新闻的模块但新闻类型没上限，点击的时候还需要让选中的分类居中显示，滑动组件有、但没有选项卡的-_-||、之前写过一次，但计算公式还有些问题只能在小程序上用、用法基本一致只是换了下计算公式。

实现效果和小程序的一样效果

因为用的滑动组件是不一样的这里就只放计算公式了。
简单点说就是计算下每个单元距离左边的距离，然后给到滑动组件就行了。

setBarList(list){  
    let listH = list.length // 数据数量 6  
    let screen = this.screen; // 屏幕中心位置 187.5  
    let w = this.barW; // 单元素宽 100  
    if(w * listH > screen * 2){ // 当数据（元素总宽）> 屏幕宽度是继续    
        let ci,cw,cw1 = 0; // 记录一些值，后面会用到   
        let move = true; // 判断是否继续，后面会用到   
        for(let i in list){ // 循环列表      
            ci = listH - i; // 剩余数据条数      
            let ctw = (Number(i) + 1) * w - w / 2; // 每条数据对应的中心值、计算时因为是从0开始，而（1*0=0）所以这里加一后开始计算      
            if(ctw >= screen&&ctw > 0){        
                cw1 = ((Number(i) + 1) * w) - screen - w + w / 2; // 数据准确的中心位置        
                if(ci * w - w / 2 >= screen) cw = cw1; // 剩余数据中心点>=屏幕中心点时直接赋值        
                else if(move){ // 剩余数据赋值是一样的所以这里只执行一次          
                    let surplusW = screen - (ci * w - w / 2); // 距离屏幕中心位置差多少距离          
                    // 上一条的中心位置+单元素宽-surplusW得到最后两条数据的位置   
                    if(cw <= 0) cw = surplusW - (w / 2 - surplusW);            	  
                    else cw = cw + w - surplusW;  
                    move = false;        
                }      
            }else cw = 0;      
            list[i].left = -cw;   
        }
    } 
    this.barList = list;  
    this.$refs.barScroll.refresh(); // 这一条是我组件需要、请忽略!
}

这个玩意想明白了不难，但没想明白就很绕脑了，我当时是恶心了小半天T^T、有被帮助到的铁子们给个赞鼓励一下呗。