记一次subNVue 原生子窗体的使用

1. 在uniApp中App模式下使用【subNVue 原生子窗体】解决抽屉侧边栏无法覆盖map、canvas等原生组件的问题

首先创建抽屉页面drawer.nvue

页面代码如下:

<template>
    <div class="wrapper">
	<!-- 	<list class="list-wrapper">
			<cell v-for="item in lists" :key="item.id">
				<div class="text-wrapper" @click="clickitem(item.id)">
					<text style="font-size: 30upx; ">{{item.name}}</text>
					<text class="icon">&#xe583;</text>
				</div>
			</cell>
		</list> -->
		<div style="flex: 1; text-align: center;">
			<div class="close-drawer" @click="toMineInfo">
				<text style="font-size: 34upx; text-align: center;">个人信息</text>
			</div>
		</div>
		<div style="flex: 1; text-align: center;">
			<div class="close-drawer" @click="hideDrawer">
				<text style="font-size: 34upx; text-align: center;">关闭抽屉</text>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
		data() {
			return {
				lists: [],
			}
		},
		beforeCreate() {
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
				fontFamily: "unibtn",
				'src': "url('../../../../static/uni.ttf')"
			});
		},
		created() {
			for(let i = 0; i < 5; i++){
				this.lists.push({
					id: i,
					name: 'Item' + i,
				});
			}
		},
        methods: {
			toMineInfo(){
				uni.navigateTo({
					url:'/pages/mine/mineInfo/mineInfo'
				})
			},
            hideDrawer() {
                uni.getCurrentSubNVue().hide('auto')
            },
			clickitem(e) {
				uni.$emit('drawer-page', e);
			}
        }
    }
</script>

<style scoped>
	.wrapper {
		flex-direction: column;
		flex: 1;
		text-align: center;
		padding: 60upx 0upx 0upx 20upx;
		background-color: #2293f7;
	}
	.nav-text {
		color: #8f8f94; 
		/* #ifndef APP-PLUS-NVUE */
		margin-bottom: 40px;
		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		margin-bottom: 40upx;
		/* #endif */
	}
	.list-wrapper {
		/* #ifdef APP-PLUS-NVUE */
		height: 450upx;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		height: 450px;
		/* #endif */
	}
	.text-wrapper {
		justify-content: center;
		border-bottom-style: solid;
		border-bottom- 1upx;
		border-bottom-color: rgba(0,0,0,.2);
		margin-bottom: 35upx;
		padding-bottom: 15upx;
	}
	.close-drawer {
		background-color: #f8f8f8;
		 300upx;
		padding: 15upx;
		border-radius: 20upx;
		border-style: solid;
		border- 1upx;
		border-color: rgba(0,0,0,.2);
	}
	.icon {
		position: absolute;
		right: 10upx;
		color: #000000;
		font-family: unibtn;
		font-size: 30upx;
		font-weight: 400;
	}
</style>

在pages.json中的配置如下:

"subPackages": [{
		"root": "pages/index",
		"pages": [ 
			{ 
				"path": "index",
				"style": {
					"navigationBarTitleText": "SubNvue",
					"app-plus": {
						"titleNView": false,
						"subNVues": [{
							"id": "drawer",
							"path": "subnvue/drawer",
							"type": "popup",
							"style": {
								"width": "70%",
								"right":"0"
								// "left":"20%"
							}
						}]
					}
				}
			}
		]
	}
]
	

2. 使用【subNVue 原生子窗体】创建一个公共的导航栏

首先创建公共导航栏页面nav.nvue

页面代码如下:

<template>
    <div class="wrapper">
		<div class="status-bar"></div>
		<div class="nav">
			<text class="back" @click="back">&#xe582;</text>
			<text class="title">{{title}}</text>
		</div>
    </div>
</template>

<script>
    export default {
		data() {
			return {
				title:''
			}
		},
		beforeCreate() {
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
				fontFamily: "unibtn",
				'src': "url('../../../../static/uni.ttf')"
			});
		},
		created() {
			let that = this;
			uni.$on('setTitle', (title) => {  
			    that.title = title;
			}) 
		},
		methods: {
			back() {
				uni.navigateBack();
			}
		},
	}
</script>

<style>
	.wrapper {
		flex: 1;
		/* background-image: linear-gradient(to right, #a80077, #66ff00); */
		background-image: linear-gradient(to right, #2293f7, #2293f7);
		flex-direction: column;
	}
	.status-bar {
		flex: 1;
	}
	.nav {
		position: relative;
		height: 44px;
		flex: 0;
		justify-content: center;
		align-items: center;
	}
	.title {
			font-size: 36upx;
	}
	.back {
		position: absolute;
		left: 3px;
		color: #000000;
		font-family: unibtn;
		font-size: 54upx;
	}
</style>

在pages.json中的配置如下:

{
	"path" : "pages/mine/mineInfo/mineInfo",
	"style" : {
		"navigationStyle":"custom",
		"app-plus":{
			"subNVues":[{
				"id":"nav",
				"path":"paltform/app-plus/subNVue/nav/nav",
				"type":"navigationBar"
				
			}]
		}
	}
}