一般来说tabbar为小程序的最高级,view覆盖不了的。
网上大多数指的都是uni中app-plus,h5/app而非小程序。
但是可以变相的通过设置标题颜色和tabbar颜色实现,自定义因不考虑单个影响全部故弃用。
image.png
以u-view中u-modal示范。
methods:{
showModalBg() {
uni.setTabBarStyle({
backgroundColor: "#666",
borderStyle: "black",
selectedColor: "#999",
color: "#999",
});
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#666",
});
// 底部tabbar中几个选项展示时设置,放弃弹窗时恢复
//tabbar1
uni.setTabBarItem({
index: 0,
selectedIconPath: "static/tabbar/tab_bs_on.png",
});
// tabbar2
uni.setTabBarItem({
index: 1,
iconPath: "static/tabbar/tab_sy_off.png",
});
// tabbar3
uni.setTabBarItem({
index: 2,
iconPath: "static/tabbar/tab_wd_off.png",
});
},
removeModeBg() {
uni.setTabBarStyle({
color: "#999999",
selectedColor: "#18C183",
borderStyle: "white",
backgroundColor: "#ffffff",
});
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#ffffff",
});
uni.setTabBarItem({
index: 0,
selectedIconPath: "static/tabbar/home-act.png",
});
uni.setTabBarItem({
index: 1,
iconPath: "static/tabbar/step.png",
});
uni.setTabBarItem({
index: 2,
iconPath: "static/tabbar/personal.png",
});
},
}
ps:
borderStyle只能为white或black;
frontColor只能为#000或#fff,写错任何一项不会生效。
本质为替换了高亮时的cion和背景色伪实现
不足是tabbar边框只有white/black,切需要设计配合给出遮罩下图。
【参考资料】https://blog.csdn.net/liujucai/article/details/103816123
网友评论