先上关键词,方便大家搜索
- uniapp自定义tabbar,中间凸起(微信小程序)
- vue3 vite tabBar uniapp
- 微信小程序自定义Tabbar(uniapp)
先配置page.json,这里配置了两套Tabbar,一个给微信小程序使用,一个给别的平台使用
// #ifdef MP-WEIXIN
"tabBar": {
"selectedColor": "#47A1FF",
"custom": true,
"list": [{
"pagePath": "pages/index/index",
"text": "抢单大厅",
"iconPath": "/static/index-light.png",
"selectedIconPath": "/static/index.png"
},
{
"pagePath": "pages/worker/worker",
"text": "工作台",
"iconPath": "/static/menu.png",
"selectedIconPath": "/static/menu.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/static/mine-light.png",
"selectedIconPath": "/static/mine.png"
}
]
},
// #endif
// #ifndef MP-WEIXIN
"tabBar": {
"selectedColor": "#47A1FF",
"backgroundColor": "#fff",
"midButton": {
"pagePath": "pages/worker/worker",
"text": "工作台",
"iconPath": "/static/menu.png",
"selectedIconPath": "/static/menu.png"
},
"list": [{
"pagePath": "pages/index/index",
"text": "抢单大厅",
"iconPath": "/static/index-light.png",
"selectedIconPath": "/static/index.png"
},
{
"pagePath": "pages/worker/worker",
"text": "工作台",
"iconPath": "/static/menu.png",
"selectedIconPath": "/static/menu.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/static/mine-light.png",
"selectedIconPath": "/static/mine.png"
}
]
},
// #endif
在微信小程序的官方文档中找到微信的自定义Tabbar示例,代码在文档里最下方
- 直接点击在开发者工具中预览效果就可以打开微信开发者工具了
小程序开发文档 -
将示例中的组件原封不动复制到项目根目录下,打包的时候会自己打进去
如图所示 - 将移过去的组件内容改成自己的,js中list 的内容就是在page.json中配置的tabbar的内容了,这样组件已经可以显示了
注意以下问题
- 点击切换时已经可以出效果了,但是菜单的选中状态需要点两次才能正常选中
- 在vue2中我们能使用生命周期解决这个问题,在vue3中我们也能使用生命周期,不过需要引入
- 代码如下所示,条件编译只在微信小程序生效
// #ifdef MP-WEIXIN
import {onShow} from "@dcloudio/uni-app"
onShow(()=>{
const curPages = getCurrentPages()[0]; // 获取当前页面实例
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
curPages.getTabBar().setData({
selected: 2 // 表示当前菜单的索引,该值在不同的页面表示不同
});
}
})
// #endif
- 在每个使用tabbar 的页面都要添加该配置哦
- vue2的自己百度,能搜到很多解决方法
网友评论