踩坑: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.开关关闭时
谢谢观看,一定要点赞收藏哦~