When using UNIApp to develop app, there are often the following problems:

1. Popup layer components that cover the native navigation bar and Tabbar. Slide-out menus don’t cover maps, videos, native navigation, popup doesn’t cover Tabbar.

2. The elements inside the pop-up layer can be rolled.

3. Add complex coverage components on map, video and other components: for example, coverage of scrolling chat records on live video

While there is a cover-view to override native components, nesting is not supported in app-Vue, and native forms are appropriate only when used by map and video components

1. Configure page.json before using it

In pages. Json, a subNVues node is added for configuration

For all configuration tables, see: Original form configuration table

Id: cannot be repeated as a unique flag Path: ubNVue subform path Type: built-in special subform types, popup (popup) and navigationBar (navigationBar). Do not write style: configure the child form’s position, background, and other style properties.

Matters needing attention

Development differences please see: Uniapp —–nvue tutorial

2. Use the original child form in the page (here use in the VUE page as an example)

Create a new folder under the page directory to store the original form. SubNVue is the VUE page that uses the original form

SubNvue code

Because event listening is global, use uni.on; Use uni.off to remove global event listening to avoid repeated listening. Always remember to remove listening

<template> <view class="content"> <view class="example"> <view class="example-title"> </view> <button < p style=" max-width: 100%; clear: both; min-height: 1em; 100vw" v-if="showVideo" id="video" :controls="false" :src="videoUrl" ></video> </view> </view> </template> <script> export default { data() { return { showVideo: false, videoUrl: 'https://www.apple.com/105/media/cn/mac/family/2018/46c4b917_abfd_45a3_9b51_4e3054191797/films/bruce/mac-bruce-tpl-cn-20 18_1280x720h.mp4' }; Uni.$on('popup-page', (data) => {console.log(data); Switch (data.type){case 'interactive': uni.showmodal ({title: 'message from Popup ', content: data.info}) break; default: uni.showToast({ title: data.title, }) break; $on(' topdrawer ', (data) => {uni. ShowToast ({title: 'click on' + data + ', icon:"none"}); $unload () {uni.$off('popup-page') uni.$off(' drawers -page')}, onReady() {this.showVideo = true}, $emit('page-popup', {title: 'I am the content'}); const subNVue = uni.getSubNVueById('tSubNvue') subNVue.show('slide-in-top', 250) } } } </script> <style> .content { align-content: center; height: 100%; } .example { padding: 0 10px 10px } .example-title { font-size: 14px; line-height: 14px; color: #777; margin: 40px 2rpx; position: relative } .example-title { margin: 40rpx 0 } .title { font-size: 20px; text-align: center; color: #8f8f94; } </style>Copy the code

Nvue page code for the parent form (testSubNvue.nvue)

There are some style and layout considerations for writing NVUE pages: Considerations

<template> <div class="wrapper"> <text class="title">{{title}}</text> <scroller class="scroller"> <div> <text class="content">{{content}}</text> </div> <div> <text style="color: red; font-size: 30rpx;" > The following is an example of Popup internal scrolling: </text> </div> <div class="cell" v-for="(item, index) in lists" @click="handle(item)" :key="index"> <text class="text">{{item}}</text> </div> </scroller> <div Class ="message-wrapper"> <text class="send-message" @click="sendMessage"> </text> </div> </div> </template> <script> export default { data() { return { title: '', content: '', lists: [], } }, created() { const that = this for (let i = 1; i < 20; i++) { this.lists.push('item' + i) } uni.$on('page-popup', (data) => { console.log(data) that.title = data.title that.content = data.content }) }, beforeDestroy() { uni.$off('drawer-page') }, methods: {sendMessage() {const subNVue = uni.getCurrentSubNvue () uni.$emit('popup-page', {title: 'Done! ', }) } } } </script> <style> .wrapper { align-items: center; flex-direction: column; justify-content: center; padding: 10rpx 15rpx; background-color: #F4F5F6; border-radius: 4rpx; } .title { height: 100rpx; line-height: 100rpx; border-bottom-style: solid; border-bottom-width: 1rpx; border-bottom-color: #CBCBCB; flex: 0; font-size: 30rpx; } .scroller { height: 400rpx; padding: 8rpx 15rpx; } .content { color: #555555; font-size: 32rpx; } .message-wrapper { flex: 0; border-top-style: solid; border-top-width: 1rpx; border-top-color: #CBCBCB; height: 80rpx; align-items: flex-end; } .send-message { font-size: 30rpx; line-height: 80rpx; color: #00CE47; margin-left: 20rpx; } .cell { margin: 10rpx; padding: 20rpx 0; top: 10rpx; align-items: center; justify-content: center; border-radius: 10rpx; background-color: #5989B9; } .text { font-size: 30rpx; text-align: center; color: white; } </style>Copy the code

Take a look at the effect of real machine debugging

Data print screenshot