哪里可以学习做网站,互联网专业,wordpress内存高,关于传媒的网站模板通过官网给出的示例自己实现了自定义的tabBar#xff0c;但结果发现
无法监听页面生命周期函数
结语#xff1a;原想的是实现不一样的效果#xff08;如下#xff09; 故尝试了自定义tabBar#xff0c;虽然做出来了#xff0c;但也发现这个做法存在不足#xff1a;
在…通过官网给出的示例自己实现了自定义的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.datasetconst url data.path// wx.switchTab切换tabBar组件可传入urlsuccessfail此处简写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
view classtab-barview classtab-bar-border/viewview wx:for{{list}} wx:keyindex classtab-bar-item data-path{{item.pagePath}} data-index{{index}} bindtapswitchTabimage src{{selected index ? item.selectedIconPath : item.iconPath}}/imageview stylecolor: {{selected index ? selectedColor : color}}{{item.text}}/view/view
/view
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或者有更好解决方案的欢迎评论区交流
