tab标签卡的顺滑切换

getRangList: function() {
    call.myRequest('/activity/club/user/v1/coin/good/zones', this.listSuc17, 'GET');
},
listSuc17: function(data) {
    const item = [{
        name: '全部'
    }]
    this.rangList = item.concat(data.value || [])
    this.setTabList()
}

重点代码：setTabList()

setTabList() {
    this.setLine()
},
setLine() {
　　let linewidth = 0
　　let lineleft = 0
　　this.getElementData('#tab_item', (data) => {
　　　　let el = data[this.currentIndex]
　　　　if (el) {
　　　　　　linewidth = el.width / 2
　　　　　　lineleft = el.width / 2 + (-data[0].left - 12) + el.left
　　　　　　this.lineStyle = {
　　　　　　　　width: linewidth + 'px',
　　　　　　　　transform: 'translateX(' + lineleft + 'px) translateX(-50%)',
　　　　　　　　transitionDuration: '.3s'
　　　　　　}
       }
    })
},

// 获取元素
getElementData(el, callback) {      
    uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
        callback(data[0]);
    });
}  

 

dom部分

<view class="swiperbox">
   <scroll-view class="scroll-view_H" style="width: 100%;white-space: nowrap;" scroll-x="true" scroll-left="120">
       <view id="tab_list">
           <view v-for="(item, index) in rangList" :key="index" id="tab_item" @click="handleMenu(item, index)" class="scroll-view-item_H size_24 color333 weight500 inline t_center"
                         style="padding-right: 42upx;" :class="{ 'active': currentIndex == index }">
               <view>{{item.name}}</view>
           </view>
       </view>
       <view class="underline" :style="{ width: lineStyle.width, transform: lineStyle.transform, transitionDuration: lineStyle.transitionDuration }"></view>
   </scroll-view>
</view>