了解底部导航栏之前需要先了解uniapp的跳转方法,因为跳转到 tabBar 页面只能使用 switchTab 跳转
//保留当前页面,跳转到应用内的某个页面,使用`uni.navigateBack`可以返回到原页面
uni.navigateTo({
url: url
});
//关闭当前页面,跳转到应用内的某个页面。
uni.redirectTo({
url: url
});
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: url
});
//关闭当前页面,返回上一页面或多级页面。可通过 `getCurrentPages()` 获取当前的页面栈,决定需要返回几层
uni.navigateBack({
url: url
});
然后我的项目里面有动态绑定的导航栏地址
uni.setTabBarItem({
index: 0,
text: '拜访',
pagePath: '/pages/visit/index',
iconPath: "static/tabbar/home_icon.png",
selectedIconPath: "static/tabbar/home_icon_select.png",
});
当运行这段代码的时候 会使导航栏第一格的目标整体改变 因为需求原因 拜访页面已经取消了导航栏展示
//隐藏导航栏
uni.hideTabBar(OBJECT)
//显示导航栏
uni.showTabBar(OBJECT)
公司项目之前的逻辑是在跳转到拜访页面的时候会改变导航栏第一格的信息,可是导航栏在关闭后二次打开会重置导航栏数据,导致第一格动态没生效,需要挪动动态绑定的位置改为显示导航栏的时候动态绑定一次。
这时新的问题出现了,switchTab跳转无法传递参数。 我想到的解决方法就是在拜访页面跳转的时候往本地写入一个true的数据,然后在拜访页面能调整到的需要显示的导航栏页面的show周期里面去判断有无本地数据。满足条件就显示导航栏需改第一格数据,然后马上删除本地的true数据。
具体如下
//存
uni.setStorageSync('showPoster',"true");
//获取+删除
if(uni.getStorageSync('showPoster')){
uni.setTabBarItem({
index: 0,
text: '拜访',
pagePath: '/pages/visit/index',
iconPath: "static/tabbar/home_icon.png",
selectedIconPath: "static/tabbar/home_icon_select.png",
});
uni.removeStorage({
key: 'showPoster',
});
}