方法1(uni自带的):
文档https://uniapp.dcloud.io/collocation/pages?id=tabbar
翻到midButton部分
这个只支持app
pages.json里的tabBar加上下面代码(不用在list[]里加)
"midButton":{
"iconWidth":"120rpx",
"height":"160rpx",
"text":"按钮名",
"iconPath":"static/图片"
},
这个按钮默认是没效果的,所以在App.vue监听这个按钮来跳转页面
onLaunch: function() {
uni.onTabBarMidButtonTap(() => {
uni.navigateTo({
url: "/pages/页面"
});
});
},
方法2(uView组件):
直接用uview的底部导航栏,七端可用,不过也有缺点
详见文档https://uviewui.com/components/tabbar.html
方法3(自己写底部导航栏):
github挺多这种的,我也懒得找出来了