uniapp-tabBar中间凸起按钮

最新推荐文章于 2024-08-27 17:55:21 发布

菊花枸杞茶

最新推荐文章于 2024-08-27 17:55:21 发布

阅读量1.4w

点赞数 6

分类专栏： uniapp vue.js 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_34227291/article/details/103750961

版权

vue.js 同时被 2 个专栏收录

18 篇文章 2 订阅

订阅专栏

uniapp

10 篇文章 3 订阅

订阅专栏

前言：以下是使用的是原生方法，兼容会比绘制按钮的好，不用写更多代码去让图标固定到tabBar位置。官网有提到“中间按钮仅在 list 项为偶数时有效”，这需要注意，另外在中间按钮的图标有的凸出的部分的图标有个描边的边框之类的，这点在当前uniapp版本已经自动适应了，在之前的开发版本是不会自适应的。比如在安卓上面能够自适应凸出部分的描边可以刚刚好跟tabBar水平对齐，但是在苹果上面是不会的。

下面我们讲下怎么实现。。。。

（以下图片效果是在苹果手机基座运行的）
不带描边的中间按钮图标效果：

PS：这里可以看到中间按钮可以正常凸出来，图片除了有无描边的区别，还有一个问题就是图片中的白色“+”号那个区域可以看到背景，这个修改图片背景就可以覆盖掉。

带描边的中间按钮图标效果：

PS：这个图片有的白色背景，可以覆盖下面的，效果看起来比上面的会好很多。此外，凸出部分还有一点很细的灰色描边可以自适应到水平对齐。

在以下两个文件中写代码就可以实现了
1：页面效果实现，也是显示tabBar;
2：点击中间按钮事件，也就是点击中间按钮触发一个点击事件

实现tabBar部分代码,在pages.json文件写

PS:midButton就是中间按钮仅在 list 项为偶数时有效

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "home"
			}
		}, {
			"path": "pages/news/news",
			"style": {
				"navigationBarTitleText": "news"
			}
		}, {
			"path": "pages/more/more",
			"style": {
				"navigationBarTitleText": "more"
			}
		}, {
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "mine"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#8f8f8f",
		"selectedColor": "#FD5C5C",
		"borderStyle": "white",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "static/tabBar/shouye.png",
				"selectedIconPath": "static/tabbar/tabbar_home_select.png"
			},
			{
				"pagePath": "pages/news/news",
				"text": "消息",
				"iconPath": "static/tabBar/xiaoxi.png",
				"selectedIconPath": "static/tabbar/tabbar_play_select.png"
			},
			{
				"pagePath": "pages/more/more",
				"text": "更多",
				"iconPath": "static/tabBar/gengduo.png",
				"selectedIconPath": "static/tabbar/tabbar_money_select.png"
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"iconPath": "static/tabBar/wode.png",
				"selectedIconPath": "static/tabbar/tabbar_personal_select.png"
			}
		],
		"midButton": {
			"width": "63px",
			"height": "63px",
			"iconPath": "static/tabBar/plus.png",
			"iconWidth": "55px"
			// "backgroundImage":"static/images/tabbar/plus.png"
		}
	}
}