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',
		});
	})
});
相关推荐
JIseven2 天前
uniapp页面新手引导
java·前端·uni-app
不如摸鱼去2 天前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·小程序·uni-app
小徐_23332 天前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·微信小程序·uni-app
00后程序员张2 天前
HTTPS Everywhere 时代的抓包挑战,从加密流量解析到底层数据流捕获的全流程方案
网络协议·http·ios·小程序·https·uni-app·iphone
草字2 天前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
速易达网络2 天前
Uniapp + Coze智能在线课程平台应用实现方案
uni-app
Qlittleboy2 天前
uniAPP开发 image 标签的@error事件不被触发调用怎么办
uni-app
吳所畏惧3 天前
少走弯路:uniapp里将h5链接打包为apk,并设置顶/底部安全区域自动填充显示,阻止webview默认全屏化
android·安全·uni-app·json·html5·webview·js
2501_915921433 天前
Bundle Id 创建与管理的工程化方法,一次团队多项目协作中的流程重构
服务器·ios·小程序·重构·https·uni-app·iphone
2501_915909063 天前
深度解析 iOS 内存占用,构建多工具协同的内存诊断、监控与优化体系
android·ios·小程序·https·uni-app·iphone·webview