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',
		});
	})
});
相关推荐
2501_916008893 小时前
iOS 上架需要哪些准备,账号、Bundle ID、证书、描述文件、安装测试及上传
android·ios·小程序·https·uni-app·iphone·webview
时光慢煮8 小时前
从踩坑到跑通:uni-app 项目落地 HarmonyOS 的完整实录(含模拟器 / 真机)
华为·uni-app·harmonyos
FFF-X9 小时前
UniApp 小程序实现自定义每张图片播放时长的轮播图(基于 uView 的 u-swiper)
小程序·uni-app
奚大野...10 小时前
uni-app手机端项目touchmove禁止页面上下拉滑动
前端·javascript·uni-app
酒醉的胡铁12 小时前
uniapp运行到鸿蒙证书配置
服务器·uni-app·harmonyos
华玥作者13 小时前
uni-app + Vite 项目中使用 @uni-helper/vite-plugin-uni-pages 实现自动路由配置(超详细)
前端·uni-app·vue·vue3·vite
狼性书生13 小时前
uniapp+vue3实现的简单吐司通知弹窗组件
前端·uni-app·vue·组件·插件
Front思15 小时前
uniapp解决点击穿透问题总结
uni-app
peachSoda716 小时前
uniapp开发小程序 使用scroll-view时左右滑动切换无法回到最左边的bug解决方案
小程序·uni-app
ChinaLzw16 小时前
解决uniapp web-view 跳转到mui开发的h5项目 返回被拦截报错的问题
前端·javascript·uni-app