u-tabs蓝条条不居中

87 阅读1分钟

这是想要的效果:

image.png

当导航栏数据更新后,u-tabs的蓝条条不居中:

1754548651205.png

解决方法: 添加变量showTap 控制整个u-tabs的显示,销毁DOM之后,重新渲染数据。

<view class="padding-0-16 flex  align-items-center" v-if="navs && navs.length && showTap" >
    <view class="" style="width: calc(100% - 50px);">
        <u-tabs 
		:inactiveStyle="{ color: theme=='dark'?'#BDBDBD':'#999', fontSize: '14px' }"
		:activeStyle="{ color: theme=='dark'?'#FBFBFB':'#333', fontSize:'16px',fontWeight:'bold' }"
		:list="navs" @click="navClick" :current="navsCurrent"  class="margin-top-12">
        </u-tabs>
     </view>
		<view class="flex align-items-center margin-top-12 sortname" @click="onSort" style="position: relative;">
			<view class="text12 text-main-color padding-left-10 margin-right-2 margin-left-4">排序 </view>
			<image src="/static/index/sortname.png" style="width: 16px;height: 16px;"></image>
		</view>		
</view>
handleNavSortUpdate(updatedNavs) {
    this.navs = updatedNavs;
    this.navsCurrent = 0;
    this.showTap=false;
    this.$nextTick(() => {
        this.navClick(this.navs[this.navsCurrent], true);
    });			
  },