• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”. [Prizes for comments]

preface

SubNvue is supported since 1.9.10 and only supports app platforms

  • subNVuesIs the parent form of the VUE page. Used to solve the App in the VUE page layer coverage and native interface flexible customization.
  • It is an NVUE page, rendered using weeX engine, easy to customize native navigation or overwrite native maps, videos, etc
  • While there is a cover-view to override native components, nesting is not supported in app-Vue and can only be used in map and video components, where using native forms is more appropriate

1. First configure pages. Json (I’m quoting an official configuration example here)

{" pages ": [{" path" : "pages/index/index", / / home "style" : {" subNVues ": [{/ / side menu" id ": Uni.getsubnvuebyid ('drawer') : "path": "pages/index/ node. nvue", // nvue path" style": {// "position": "popup"; // "position": "popup"; "50%"}}, {" id ": / / popup layer" popup ", "path" : "pages/index/popup", "style" : {" position ":" popup ", "margin", "auto" and "width" : "150px", "height": "150px" } }] } }] }Copy the code

Note:

  • subNVues 的 idIs globally unique and cannot be repeated
  • Can be achieved byuni.getSubNVueById(‘id’)To obtainsubNVuesAn instance of the
  • subNVues 的 pathThe property can only benvueThe file path

See the official documentation for more configurations

2. Use the original form after creation

​

Create a folder under a project folder for subNvue native forms

3. Reference the original form on the VUE page

loadfun(e){
			let drawer = uni.getSubNVueById('drawer');// Obtain the instance of the subNVues primitive form by ID
			uni.$emit('senddata'.this.swiperlist[e])
           Uni.getsubnvuebyid ('drawer').show
			drawer.show('zoom-fade-out'.200.() = >{// The first parameter specifies the animation. I set the new form to zoom in gradually
             // The second argument is the execution time, and the third argument is the completed callback})},Copy the code

4. Set the function to hide the form on the form page

mounted() {
			let _this = this;
			uni.$on('senddata'.(e) = >{ _this.infos = e; })},methods: {
			toSecondPage() {
				// Close drawer before jumping, because subNVue will exist on other pages
				uni.getCurrentSubNVue().hide('slide-out-left');
              // Slide-out-left The new form is hidden from the left}}Copy the code

For more animation types, see animation Types

Supplement:

Subnvue.postmessage () can send messages

Subnvue.onmessage (), which listens for messages, is obsolete

So I use uni. Emit and uni. Emit and uni

Although subNVue is more powerful and takes up more memory than cover-View and Plus.nativeobj. View, in order to ensure a better performance experience, a VUE page should not load too many subNVue subforms. It is recommended to keep the subNVue subforms under three

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

One student will be selected from the comment section of each article to give a mug * 1