uni-app自定义底部tabbar实现某个tab的显示和隐藏

最新推荐文章于 2026-04-06 09:06:59 发布

原创最新推荐文章于 2026-04-06 09:06:59 发布 · 4.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #uni-app

本文介绍了如何在Vue项目中利用v-if指令动态控制自定义Tabbar中某个tab的显示和隐藏，以解决安卓App可能出现的闪屏或Tabbar消失问题。通过在页面的onShow()方法中调用uni.hideTabBar()，可以避免页面加载时Tabbar的异常状态。

自定义的tabbar可用v-if实现某个tab的显示和隐藏

页面

<view class="tab-box row acenter">
    <navigator class="grow1 column acenter jcenter" hover-class="none" url="" open-type="switchTab">
        <image class="tab-icon" src="@/static/images/tab_home_sel.png"></image>
        <text class="font-blue fontS12">首页</text>
    </navigator>
    <navigator v-if="isShow" class="grow1 column acenter jcenter" hover-class="none" url="" open-type="switchTab">
        <image class="tab-icon" src="@/static/images/tab_recommend_nor.png"></image>
        <text class="font-grey fontS12">推荐</text>
    </navigator>
      <navigator class="grow1 column acenter jcenter" hover-class="none" url="" open-type="switchTab">
        <image class="tab-icon" src="@/static/images/tab_my_nor.png"></image>
        <text class="font-grey fontS12">我的</text>
    </navigator>
</view>

css样式

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.acenter {
    align-items: center;
}

.jcenter {
    justify-content: center;
}

.grow1 {
    flex-grow: 1;
}

.acenter {
    align-items: center;
}

.tab-box{
	position:fixed;
	bottom:0;
	left:0;
	z-index:2000;
	width:100%;
	height:100rpx;
	background: #fff;
	border-top:#ddd solid 1rpx;
}

重点如下

这样写后，有时候安卓app会出现闪屏或者tabbar隐藏不见，所以解决如下

pages.json里的tabbar也写上，然后在页面中onShow() {uni.hideTabBar()}