uniapp-tabBar中间凸起按钮

秒速五厘米 2021-07-25 00:51 1388阅读 0赞

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

--------------------

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

--------------------

## （以下图片效果是在苹果手机基座运行的）   **不带描边的中间按钮图标效果：**   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]   PS：这里可以看到中间按钮可以正常凸出来，图片除了有无描边的区别，还有一个问题就是图片中的白色“+”号那个区域可以看到背景，这个修改图片背景就可以覆盖掉。 ##

## **带描边的中间按钮图标效果：**   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]   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"
    		}
    	}
    }

--------------------

**中间按钮点击事件**  
PS：在项目根目录下的App.vue文件写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/631a349314c94a47a719b454b962ba8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/20e8618975d34d76bd51b9cc2f9defc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]: /images/20210724/cafe077fcaa84a3fa46ff44da4237c2b.png