uniapp自定义tabbar

2023-09-20 10:42| 来源: 网络整理| 查看: 265

在开发微信小程序时，由于uniapp官方的tabbar不满足根据权限区分tab的要求，则自定义了tabbar，出现两个问题；

问题一：自定义的tabbar在切换的时候tabbar会闪烁，尤其在用户手机性能不太好的手机型号上闪烁尤其明显；

问题二：自定义的tabbar使用uni.redirectTo切换页面每次都会触发页面的onLoad，页面数据得不到缓存，消耗性能。

所以将官方的tabbar和自定义的tabbar结合使用，

（1）在tabbar页面使用uni.hideTabBar({})将官方的tabbar页面隐藏

（2）封装自定义tabbar组件，根据权限分配tab

1. 在pages.json中把tabbar配置好，只需要配置页面路径即可

"tabBar": { "color": "#909399", "selectedColor": "#303133", "backgroundColor": "#FFFFFF", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text":"" }, { "pagePath": "pages/workOrder/workOrderList", "text":"" }, { "pagePath": "pages/my/my", "text":"" } ] },

2. 封装tabbar组件，tabbar.vue，使用uni.switchTab({})路由切换tabBar页面

{{item.text}} export default { props: { current: String, }, data() { return { tabNav: [], paddingBottomHeight: 0 //iPhonex以上手机底部适配高度 } }, created() { //适配iPhonex以上的底部 uni.getSystemInfo({ success: (res) => { let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15']; // console.log('iphone',res) for (let i=0;i

【本文地址】

公司简介

联系我们