uniapp如何实现tabbar中间加突出效果的图标（App）

注意点：只在真机上点击才有效果，浏览器会报错，运行到手机模拟器上操作。

效果图

在pages.json中配置tabbar数组(list)的下面配置以下代码

	"midButton": {
			"width": "80px",
			"height": "60px",
			"iconPath": "static/tianjia.png",  tabbar中间的图标
			"iconWidth": "50px"
		}

如果要实现点击代码如下

在根组件（App.vue）中 onLaunch声明周期中使用内置的API   uni.onTabBarMidButtonTap 点击中间图标就会触发的API（API只在根组件生效）
示例代码如下
onLaunch: function() {
			uni.onTabBarMidButtonTap(() => {
      	console.log('点击了')
				
			})
		},

如果要实现点击弹层代码如下

详细介绍原生子窗体uni-app subNVue 原生子窗体开发指南 - DCloud问答

首先 你要在那个页面上显示弹出层你就在那个页面下新建一个nvue后缀的页面，里面写你的弹出层内容

在page.json中配置如下代码
		{
			"path": "pages/index/index",  要展示的页面
			"style": {
				"navigationBarTitleText": "标题",
				"navigationStyle": "custom",
				"app-plus": {
					"subNVues": [{
						"id": "Contentid", // 唯一标识  
						"type": "popup",	
						"path": "pages/index/subNVue/popup",  你新建的nvue文件路径
						"style": {		子窗体(弹出层)配置
							"position": "absolute",
							"dock": "top",
							"mask": "rgba(0, 0, 0, 0.3)",  遮盖层
							"background": "transparent",	
							"margin": "auto"
						}
					}]
				}
			}
		},

以上就实现了弹出层效果

如何控制弹出层的显示和隐藏

const subNVue = uni.getSubNVueById('Contentid') 获取pages.json中配置的id（唯一标识）
				subNVue.show()   拿到唯一标识就可以控制弹出层的显示和隐藏
  也可以直接简写 uni.getSubNVueById('Contentid').show（） ||  uni.getSubNVueById('Contentid').hide（）   
  在任何页面都能获取到id拿到id就可以控制弹出层的显示和隐藏

配置项详情

position 原生子窗体的排版位置，排版位置决定原生子窗体在父窗口中的定位方式。

"static"，原生子窗体在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；

"absolute"，原生子窗体在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；

"dock"，原生子窗体在页面中停靠，停靠的位置由dock属性值决定。 默认值为"absolute"。

dock 原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，可取值："top"，原生子窗体停靠则页面顶部；"bottom"，原生子窗体停靠在页面底部；"right"，原生子窗体停靠在页面右侧；"left"，原生子窗体停靠在页面左侧。 默认值为"bottom"。

mask 原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；

width 原生子窗体的宽度,支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。

height 原生子窗体的高度,支持百分比、像素值，默认为100%。 当未设置height属性值时，优先通过top和bottom属性值来计算原生子窗体的高度。

top 原生子窗体垂直向下的偏移量，支持百分比、像素值，默认值为0px。 未设置top属性值时，优先通过bottom和height属性值来计算原生子窗体的top位置。

bottom 原生子窗体垂直向上偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。 当同时设置了top和height值时，忽略此属性值； 当未设置height值时，可通过top和bottom属性值来确定原生子窗体的高度。

left 原生子窗体水平向左的偏移量，支持百分比、像素值，默认值为0px。 未设置left属性值时，优先通过right和width属性值来计算原生子窗体的left位置。

right 原生子窗体水平向右的偏移量，支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。 当设置了left和width值时，忽略此属性值； 当未设置width值时，可通过left和bottom属性值来确定原生子窗体的宽度。

margin 原生子窗体的边距，用于定位原生子窗体的位置，支持auto，auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。

zindex 原生子窗体的窗口的堆叠顺序值，拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。