uniapp：中间凸起按钮的简单用法

最新推荐文章于 2025-02-28 17:23:53 发布

粉末的沉淀

最新推荐文章于 2025-02-28 17:23:53 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： web app

本文链接：https://blog.csdn.net/lilycheng1986/article/details/116056332

uniapp 专栏收录该内容

20 篇文章

订阅专栏

1、在page.json里配置tabBar

"tabBar": {
		"color": "#a9b7b7",
		"selectedColor": "#d4237a",
		"borderStyle": "white",
		"midButton": {
			"iconPath": "static/icon/mid.png",
			"height": "60px",
			"iconWidth": "40px",
			"text": "中间"
		},
		// list必须为偶数个，midButton才有效
		"list": [{
				"selectedIconPath": "./static/icon/home.png",
				"iconPath": "./static/icon/_home.png",
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"selectedIconPath": "./static/icon/img.png",
				"iconPath": "./static/icon/_img.png",
				"pagePath": "pages/charts/charts",
				"text": "图表"
			},
			{
				"selectedIconPath": "./static/icon/videocamera.png",
				"iconPath": "./static/icon/_videocamera.png",
				"pagePath": "pages/GoodsNav/GoodsNav",
				"text": "购物"
			},
			{
				"selectedIconPath": "./static/icon/search.png",
				"iconPath": "./static/icon/_search.png",
				"pagePath": "pages/rate/rate",
				"text": "评价"
			}
		]
	}

2、在App.vue的onLaunch里处理点击midButton

onLaunch: function() {
			uni.onTabBarMidButtonTap(() => {
				// 这里可以根据 个人需求 做点击处理，
				// 本人需进行页面跳转。
				uni.redirectTo({
					url: '/pages/navbar/navbar',
				})
			});
			console.log('App Launch')
		},

参考文档：https://uniapp.dcloud.net.cn/api/ui/tabbar?id=ontabbarmidbuttontap