uni-app tababr“+”突起按钮触发弹窗解决方案

操作：

点击tabbar任意导航按钮时都可以触发调起弹窗

最终效果：

 问题：

1：自己写的组件层级没法高过项目配置里的tabbar

2：如何判断用户点击的是tabbar “+”按钮

3：如何调起弹窗

方案

1：使用原生子窗体subNVue解决层级问题。subNVue是 vue 页面的子窗体，它不是全屏页面，就是用于解决 vue 页面中的层级覆盖和原生界面自定义用的。它也不是组件，就是一个原生子窗体。（注意：subNVue 子窗体引用的是 nvue 页面。所以需要书写 nvue 页面）

2：调用uni-app官方api ,uni.onTabBarMidButtonTap(CALLBACK) 监听中间“+”按钮的点击事件，解决判断用户是否点击中间“+”按钮。api详情见: https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap

3：通过

subNVue.show (aniShow,duration,showedCB)

显示原生子窗体

subNVue.hide (aniShow,duration)

隐藏原生子窗体

具体代码如下：

app.vue onLaunch 监听

uni.onTabBarMidButtonTap((e) => {
	let _this = this
	// #ifdef APP-PLUS
	// 通过 id 获取 nvue 子窗体  
	const subNVue = uni.getSubNVueById('release')
	// 打开 nvue 子窗体  
	subNVue.show('slide-in-bottom', 300, function() {
		// 打开后进行一些操作...  
		// 在 subNVue/vue 页面触发事件  
		// $emit(eventName, data) 
		uni.$emit('release', {
			// detailId: data.id,
			// detailUserId: data.userId,
			// commentCount: data.commentCount
		});
	});
	// #endif
})

中间“+”按钮配置详见：https://uniapp.dcloud.io/collocation/pages?id=tabbar

子窗体开发指南详见：https://ask.dcloud.net.cn/article/35948