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',
		});
	})
});
相关推荐
anyup5 小时前
支持鸿蒙!开源三个月,uView Pro 开源库近期更新全面大盘点,及未来计划
前端·vue.js·uni-app
阿斌_bingyu7099 小时前
uniapp实现android/IOS消息推送
android·ios·uni-app
茶憶12 小时前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app
2501_915918411 天前
移动端 HTTPS 抓包实战,多工具组合分析与高效排查指南
数据库·网络协议·ios·小程序·https·uni-app·iphone
雪芽蓝域zzs1 天前
uni-app 将 base64 图片编码转为 Blob 本地文件路径
网络协议·udp·uni-app
星光一影1 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码
mysql·小程序·uni-app·php
Qlittleboy1 天前
uniapp里 rich-text 里的img图片如何控制最大宽度
uni-app
阿奇__1 天前
uniapp h5 app 小程序获取当前定位
小程序·uni-app
*小雪1 天前
uniapp写H5授权登录及分享,返回到目标页面
开发语言·javascript·uni-app
一只程序熊1 天前
uniapp uniim ios配置消息推送
uni-app