# SubNViewDemo

**Repository Path**: mqy1023/SubNViewDemo

## Basic Information

- **Project Name**: SubNViewDemo
- **Description**: uniapp 使用subNVue原生子窗体解决web-view等原生页面中弹框无法显示的问题
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-10-12
- **Last Updated**: 2025-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


> 问题:  使用web-view或者video组件时，h5端的编写的`fixed布局`或其他`popup`弹框页面无法显示

> 解决方案：使用`subNVue`这个原生子窗体的方法去解决APP端打开弹窗显示弹窗被覆盖

> 注意事项： 1、`subNVue`这个原生子窗体的后缀必须是`.nue`
> 					 2、样式不支持scss，只能一个个样式`.className {}` 不能嵌套
> 3、`subNVue`只支持在手机上运行

[官方：uni-app subNVue 原生子窗体开发指南](https://ask.dcloud.net.cn/article/35948)


#### 一、创建一个`shareSubNVue`文件夹，文件夹下创建一个`popup.nvue`文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/4a07a1db226948fdb367b80d87fcfd37.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbXF5MTAyMw==,size_11,color_FFFFFF,t_70,g_se,x_16#pic_center)
```javascript
<template>
	<view class="page">
		<view class="pop-content">
			<view class="pop-item" @click="clickFun('1')">
				<image src="../../../static/share1.png" class="pop-image" mode="widthFix"></image>
				<view>微信</view>
			</view>
			<view class="pop-item" @click="clickFun('2')">
				<image src="../../../static/share2.png" class="pop-image" mode="widthFix"></image>
				<view>朋友圈</view>
			</view>
			<view class="pop-item" @click="clickFun('3')">
				<image src="../../../static/share3.png" class="pop-image" mode="widthFix"></image>
				<view>COPY链接</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		created() {
			const vm = this;
			// 接收信息的页面
			uni.$on('from-parent', (data) => {
				uni.showToast({
					title: data.type + ', ' +  data.content
				})
				switch (data.type) {
					case '1':
						break;
					case '2':
						break;
					case '3':
						break;
						// .... 
				}
			});
		},
		beforeDestroy() {
			// 页面销毁之前 移除监听器
			uni.$off('from-parent');
		},
		methods: {
			clickFun(type) {
				let content = '';
				if (type == '1') {
					content = '子参数1';
				} else if (type == '2') {
					content = '子参数2';
				} else if (type == '3') {
					content = '子参数3';
				}

				// 获取当前 subNVues 原生子窗体的实例。
				const subNVue = uni.getCurrentSubNVue();
				// 向父窗体传递参数
				uni.$emit('to-parent', {
					type: type,
					content: content
				});
				// 子窗体隐藏
				// 可自定义 隐藏动画效果，时间
				subNVue.hide();

			}

		}
	}
</script>
<!-- 不能使用scss -->
<style>
	.pop-content {
		padding: 0 40upx;
		height: 320upx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.pop-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
	}
	.pop-image {
		width: 120upx;
		margin-bottom: 10rpx;
	}
</style>

```

#### 二、`pages.json`中配置subNVue文件路径和样式配置

```json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "SubNView demo",
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"text": "分享", //需要显示的文字
							"fontSize": "15", //字号
							"float": "right", //浮动
							"color": "#FFFFFF", //字体颜色
							"width": "auto" //设置宽度
						}]
					},
					"subNVues": [{
						"id": "popup", // 唯一标识id
						"path": "pages/index/shareSubNVue/popup", // 页面路径  
						"type": "popup",  //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
						"style": { // 底部显示
							"position": "absolute",
							"margin":"auto",
							"width":"100%",
							"height": "320upx",
							"bottom": "0"
						}
					}]
				}
			}
		}
	],
```

#### 三、页面中调用
父子页面传输数据，使用`uni.$emit`方法去实现要传递的数据， 使用`uni.$on`方法去实现接收数据
```javascript
uni.$emit('data-send', { })

uni.$on('data-send', data => { })
```

`index.vue` 中调启子窗口
```javascript
const subNVue = uni.getSubNVueById('popup'); //  对应page.json的id

// 向子窗体传递参数
uni.$emit('from-parent',{
	type: '1',
	content: '父给子参数1'
})

// 1:子窗体从顶部进入（动画效果）, 2:显示原生子窗体的动画持续时间
subNVue.show('slide-out-top', 250)
```

**页面效果如下**
![在这里插入图片描述](https://img-blog.csdnimg.cn/9b886b18e0fa469b8a950400bf8cede8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbXF5MTAyMw==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)