动态切换底部导航栏及指定页面内容（uniapp开发小程序）

踩坑：uni.setTabBarItem(OBJECT)方法，官方提供，在适配小程序上时，参数pagePath，visible均无法使用

一.需求：

        添加开关，用于控制页面显示隐藏

二.实现：uniapp+vux+switch组件

三.思路：

1）思路一：

进入小程序首页时，通过vux存储全局判断Flag，使用自定义组件替换原生组件。点击开关，实现Tab栏动态切换，达到指定页面隐藏/显示效果。

1.引入switch组件，引入自定义tab组件

2.使用vuex

3.参考地址：uniapp根据用户权限动态改变tabBar的数量和内容 - 我的世界蹦擦擦 - 博客园 (cnblogs.com)

注：目前这个思路会出现底部导航栏闪烁问题，需另行解决。这个思路已舍弃，代码已删除，采用思路二

2）思路二：

将需替换页面封装成组件，将替换页面封装为组件。进入小程序首页时，通过vux存储全局判断Flag。通过全局Flag，结合uniapp中uni.setTabBarItem(OBJECT)方法切换tab栏文字和标题，同时判断，进行组件之间切换。点击开关实现tab栏图标文字及页面切换效果。.配置vuex : uniapp中已经集成了vuex，我们直接用就可以

1. 配置vuex

        uniapp中已经集成了vuex，我们直接用就可以。在store文件下创建index.js

        1）state中：

// 用于判断发现页面显示内容
foundShowContentFlag:true,
// 用于判断发现页面显示内容
globalFoundFlag:true,

        3） mutations中：

// 设置发现页显示判断标志
	setFoundShowContentFlag(state, val){
	state.foundShowContentFlag = val
},
// 用于判断发现页面显示内容
	setGlobalFoundFlag(state, val){
	state.globalFoundFlag = val
},

2.引入switch开关组件，使用

<yjy-switch
    v-if="!edit"
	class="tab-found"
	@switchFunction="switchFunction"
	:switchType="'text'"
	:defaultColor="'#E13500'"
	:highColor="'#FFFFFF'"
	:defaultValue="foundFlag"
	:itemIndex="1">
</yjy-switch>

3.switchFunction()点击执行函数

        开关点击后：设置判断Flag 

// 发现页面开关
switchFunction(){
	let foundCode = 0
	// 设置开关状态
	foundCode = this.foundFlag ? 0 : 1
								
	// 设置状态，控制发现页是否显示
	// showDiscoverStatus  //开关状态  0/1
	// shopId  //店铺id
	this.$request.urlRequest(
	"/shop/shop/updateShowDiscoverShopStatus?showDiscoverStatus="+ foundCode
	+"&shopId="+this.getShopOccupyId,
	{},
	"POST",
	(res)=>{
		if(res.code==200){
			this.$api.msg(!this.foundFlag?"发现开启成功":"发现关闭成功");
						
			// 设置开关状态
			this.foundFlag = !this.foundFlag
			this.setFoundShowContentFlag(this.foundFlag)
						
			//console.log("foundShowContentFlag++"+this.foundShowContentFlag)

            // 设置成功后进行更改
            if (this.foundShowContentFlag) {
				uni.setTabBarItem({
					index: 1,
					text: '发现',
					iconPath: 'static/tab-cate.png',
					selectedIconPath: 'static/tab-cate-current.png'
				})
			} else {
				uni.setTabBarItem({
					index: 1,
					text: '订单',
					iconPath: 'static/tab-order.png',
					selectedIconPath: 'static/tab-order-current.png'
				})
			}
		}
	})
}

4.index首页配置

        onload中：小程序每次进入时都要先获取一遍参数配置，然后初始化页面

// 查询底部导航栏是否显示发现页  0关 1开
this.$request.urlRequest(
	"/shop/shop/getShopById?id=" + shopId, {},
	"GET",
	(res) => {
		if (res.code == 200) {
			// 设置底部显示发现否
			if (res.result.showDiscover == 0 && res.result.showDiscover != null) {
				this.setFoundShowContentFlag(false)
				// 设置底部导航栏样式  替换的订单页
				setTabBarItem(1, '订单', 'static/tab-order.png','static/tab-order-current.png')
			} else {
				this.setFoundShowContentFlag(true)
				// 设置底部导航栏样式  原发现页样式
				setTabBarItem(1, '发现', 'static/tab-cate.png','static/tab-cate-current.png')
			}
		}
    })
} else {
	this.setFoundShowContentFlag(false) //发现页开关
	// 设置底部导航栏样式  原发现页样式
	setTabBarItem(1, '发现', 'static/tab-cate.png', 'static/tab-cate-current.png')
}

// 设置底部导航栏样式 官方提供的方法
// index/索引  text/修改文本  iconPath/默认图标路径  selectedIconPath/选中图标路径
let setTabBarItem = (index, text, iconPath, selectedIconPath) => {
	uni.setTabBarItem({
		index,
		text,
		iconPath,
		selectedIconPath
	})
}

最后看下实现效果：

1.开关打开时：

 2.开关关闭时

谢谢观看，一定要点赞收藏哦~