微信小程序-自定义tabBar
创始人
2024-11-19 13:36:01
0

通过官网给出的示例自己实现了自定义的tabBar,但结果发现

无法监听页面生命周期函数

结语:原想的是实现不一样的效果(如下)

故尝试了自定义tabBar,虽然做出来了,但也发现这个做法存在不足:

在页面js文件中,需要给出以下代码:

Component({   pageLifetimes: {     show() {       if (typeof this.getTabBar === 'function' &&         this.getTabBar()) {         this.getTabBar().setData({           selected: 0		// 对应tabBar的下标         })       }     }   },   data: {     navBarHeight: getApp().globalData.navBarHeight,   }, })

相当于将原来的page页面更改为组件components

这样做的结果就是无法监听页面生命周期函数(至少在创建page时自带的生命周期函数均无法监听)

这是我遇到的,若有解决方案,欢迎留言告知

实现步骤

官方文档:基础能力 / 自定义 tabBar (qq.com)

1.app.json配置tabBar

"tabBar": {     "custom": true,     "color": "#a5abbd",     "selectedColor": "#1dba73",     "backgroundColor": "#ffffff",     "list": [{       "pagePath": "pages/home/home",       "text": "首页"     },{       "pagePath": "pages/index/index",       "text": "测试"     }]   }

注意:此处path不写最前面的 /

2.在项目根目录下添加文件夹custom-tab-bar,并添加组件,命名为index(下面的代码均借鉴官方demo,可自行修改)

项目文件夹如下:

index.js:

Component({   data: {     selected: 0,     color: "#a5abbd",     selectedColor: "#1dba73",     list: [{       pagePath: "/pages/home/home",       iconPath: "/images/icon/home.svg",       selectedIconPath: "/images/icon/home-selected.svg",       text: "首页"     }, {       // 此处path必须加前面的/,否则在切换tabbar时,会自动拼接地址,导致传入url有误,系统没有任何效果       pagePath: "/pages/index/index",       text: "测试"     }]   },    methods: {     switchTab(e) {       const data = e.currentTarget.dataset       const url = data.path       // wx.switchTab切换tabBar组件,可传入url,success,fail,此处简写       wx.switchTab({url})       // 完整写法       // wx.switchTab({       //   url: url,       //   success(res){console.log(res)},       //   fail(error){console.log(error)}       // })       this.setData({         selected: data.index       })     }   } })

注意:此处path必须加前面的/,否则在切换tabbar时,会自动拼接地址,导致传入url有误,系统没有任何效果

index.json:

{   "component": true }

index.wxml:

      {list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">     {selected === index ? item.selectedIconPath : item.iconPath}}">     {selected === index ? selectedColor : color}}">{{item.text}}    

index.wxss:

.tab-bar {   position: fixed;   bottom: 0;   left: 0;   right: 0;   height: 48px;   background: white;   display: flex;   padding-bottom: env(safe-area-inset-bottom); }  .tab-bar-border {   background-color: rgba(0, 0, 0, 0.33);   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 1px;   transform: scaleY(0.5); }  .tab-bar-item {   flex: 1;   text-align: center;   display: flex;   justify-content: center;   align-items: center;   flex-direction: column; }  .tab-bar-item image {   width: 27px;   height: 27px; }  .tab-bar-item view {   font-size: 10px; }

到此处应该就会出现tabBar且可点击,点击时也能切换页面

但可能出现问题:一个tabBar要点击两次才能更改样式(即tabBar与页面未连接)

解决:

在页面的js文件中:

Component({   pageLifetimes: {     show() {       if (typeof this.getTabBar === 'function' &&         this.getTabBar()) {         this.getTabBar().setData({           selected: 0		// 对应tabBar的下标         })       }     }   },   data: {     navBarHeight: getApp().globalData.navBarHeight,   }, })

至此,自定义tabBar便完成了,但就像我前面说的,如此修改之后,无法监听页面的生命周期函数,大家自行判断是否需要自定义tabBar,或者有更好解决方案的,欢迎评论区交流

相关内容

热门资讯

一分钟内幕!科乐吉林麻将系统发... 一分钟内幕!科乐吉林麻将系统发牌规律,福建大玩家确实真的是有挂,技巧教程(有挂ai代打);所有人都在...
一分钟揭秘!微扑克辅助软件(透... 一分钟揭秘!微扑克辅助软件(透视辅助)确实是有挂(2024已更新)(哔哩哔哩);1、用户打开应用后不...
五分钟发现!广东雀神麻雀怎么赢... 五分钟发现!广东雀神麻雀怎么赢,朋朋棋牌都是是真的有挂,高科技教程(有挂方法)1、广东雀神麻雀怎么赢...
每日必看!人皇大厅吗(透明挂)... 每日必看!人皇大厅吗(透明挂)好像存在有挂(2026已更新)(哔哩哔哩);人皇大厅吗辅助器中分为三种...
重大科普!新华棋牌有挂吗(透视... 重大科普!新华棋牌有挂吗(透视)一直是有挂(2021已更新)(哔哩哔哩)1、完成新华棋牌有挂吗的残局...
二分钟内幕!微信小程序途游辅助... 二分钟内幕!微信小程序途游辅助器,掌中乐游戏中心其实存在有挂,微扑克教程(有挂规律)二分钟内幕!微信...
科技揭秘!jj斗地主系统控牌吗... 科技揭秘!jj斗地主系统控牌吗(透视)本来真的是有挂(2025已更新)(哔哩哔哩)1、科技揭秘!jj...
1分钟普及!哈灵麻将攻略小,微... 1分钟普及!哈灵麻将攻略小,微信小程序十三张好像存在有挂,规律教程(有挂技巧)哈灵麻将攻略小是一种具...
9分钟教程!科乐麻将有挂吗,传... 9分钟教程!科乐麻将有挂吗,传送屋高防版辅助(总是存在有挂)1、完成传送屋高防版辅助透视辅助安装,帮...
每日必看教程!兴动游戏辅助器下... 每日必看教程!兴动游戏辅助器下载(辅助)真是真的有挂(2025已更新)(哔哩哔哩)1、打开软件启动之...