uni-app 底部导航中间按钮突出

方法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挺多这种的,我也懒得找出来了

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注