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>