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',
		});
	})
});
相关推荐
小威编程15 分钟前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
江-月*夜18 分钟前
uniapp vuex 搭建
android·javascript·uni-app
圈圈的熊20 分钟前
uniapp 使用 websocket
uni-app
计算机学姐5 小时前
基于uniapp微信小程序的旅游系统
vue.js·spring boot·mysql·算法·微信小程序·uni-app·旅游
计算机学姐5 小时前
基于uniapp微信小程序的宠物救助宠物领养系统
vue.js·spring boot·mysql·微信小程序·小程序·uni-app·宠物
大牛哥哥6 小时前
uni-app @click.stop @click.stop.native均不生效
javascript·vue.js·uni-app
赵锦川6 小时前
微信小程序 uniapp 腾讯地图的调用
微信小程序·小程序·uni-app
计算机学姐6 小时前
基于uniapp微信小程序的校园二手书交易系统
java·vue.js·spring boot·mysql·微信小程序·java-ee·uni-app
我有一个object14 小时前
uniapp的IOS证书申请(测试和正式环境)及UDID配置流程
javascript·ios·uni-app·vue
wkj00121 小时前
Uniapp如何处理后端返回图片流验证码
uni-app