这是想要的效果:
当导航栏数据更新后,u-tabs的蓝条条不居中:
解决方法: 添加变量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);
});
},