手册版本 V6.0

演示介绍

本页面用于演示使用 js 来动态设置底部导航（函数较为简单，所以没有进行封装）；

兼容平台

演示代码

<template>
	<view class="gui-padding">
		<view class="gui-list" style="margin-top:100rpx;">
			<view class="gui-list-items" @tap="hideBar">
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">隐藏 tabBar</text>
						<text class="gui-list-title-desc">点击体验</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
			</view>
			<view class="gui-list-items" @tap="showBar">
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">展示 tabBar</text>
						<text class="gui-list-title-desc">点击体验</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
			</view>
			<view class="gui-list-items" @tap="setBarText">
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">设置右上角文本</text>
						<text class="gui-list-title-desc">点击体验</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
			</view>
			<view class="gui-list-items" @tap="removeBarText">
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">移除右上角文本</text>
						<text class="gui-list-title-desc">点击体验</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
			</view>
			<view class="gui-list-items" @tap="setTabBarRedDot">
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">设置右上角红点</text>
						<text class="gui-list-title-desc">点击体验</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
			</view>
			<view class="gui-list-items" @tap="removeTabBarRedDot">
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">移出右上角红点</text>
						<text class="gui-list-title-desc">点击体验</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return { }
	},
	methods:{
		hideBar : function () {
			uni.hideTabBar();
		},
		showBar : function () {
			uni.showTabBar();
		},
		setBarText : function(){
			uni.setTabBarBadge({index : 0, text : "9"});
		},
		removeBarText : function(){
			uni.removeTabBarBadge({index : 0});
		},
		setTabBarRedDot : function () {
			uni.showTabBarRedDot({index: 1});
		},
		removeTabBarRedDot : function () {
			uni.hideTabBarRedDot({index: 1});
		}
	}
}
</script>
<style>
</style>