https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
我查了其他大佬实现的方案
都是用 uni.hidetabbar 绕开的方案
https://uniapp.dcloud.net.cn/api/ui/tabbar.html#hidetabbar
丑陋，太丑陋了
4***@qq.com
- 发布：2024-05-06 13:43
- 更新：2024-05-06 20:37
- 阅读：113
4***@qq.com (作者)
根据官方文档实现了下
https://uniapp.dcloud.net.cn/collocation/pages.html#custom-tab-bar
微信小程序官方给的示例移植到uniapp需要做些修改
跟原生 tabbar 相比，自定义的 tabbar 是每个页面（page）单独的
在初次切换时，由于第一次渲染，会造成闪动
而且每个页面的 tabbar 数据都是独立的，需要代码上做特殊处理：
- 在
App.vue定义 globalData，用于各个页面的 tabbar 全局访问：
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
globalData: {
CustomTabIndex: 0
}
}
</script>
<style>
</style>- 在
/custom-tab-bar/index.js里使用 globalData 来动态更新每个页面的 tabbar 的 selected 值：
var app = getApp()
Component({
data: {
selected: 0,
color: "#888888",
selectedColor: "#000000",
list: [{
pagePath: "/pages/index/index1",
text: "页面1"
},
{
pagePath: "/pages/index/index2",
text: "页面2"
},
{
pagePath: "/pages/index/index3",
text: "页面3"
}
]
},
attached() {
this.setData({
selected: app.globalData.CustomTabIndex
})
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({
url
})
app.globalData.CustomTabIndex = data.index
}
}
})
4***@qq.com (作者)
能用，但是很奇怪
2024-05-06 16:27