uniapp 中间tabbar的实现

UI 需求 : 有五个tabbr栏 ,中间的按钮更大 ,如图 :

说明 : 在tabbar中的list 配置 其他四个tabbar :首页 精华 社区 我的

1. 在page.json中配置 在tabbar中 ,与list 平级 ,设置按钮的显示

"midButton": {
      "width": "64px",
      "height": "62px",
      "iconWidth": "68px",
      "iconPath": "./static/center@2x.png"
    }

2. 在App.vue中设置中间按钮的跳转

onLaunch(() => {
	console.log("App Launch");
	// uni.hideTabBar()
	uni.onTabBarMidButtonTap(() => {
		uni.navigateTo({
			url: '/pages/diagnosis/diagnosis',
		});
	})
});
相关推荐
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index4 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情11 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00714 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字14 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔14 小时前
uniapp rpx兼容平板
uni-app
荔枝吖14 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗15 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141617 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子2 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测