Uni-App subNVue 原生子窗体

在我们的开发中，经常会遇到各种弹窗，层级问题

而在uniapp官网中就有这么一个 Popup，而且使用这个 组件之间通信也简单了多。直接正题，最简单的使用。

创建 子窗体 页面，这边建议在pages目录下面创建一个subNVue目录，再在其目录下创建子窗体页面。

|-- pages  
    |-- index               // index 目录  
    |   |-- subNVue         // subNVue 目录  
    |       |-- nav.nvue    // 自定义导航栏  
    |       |-- popup.nvue  // 弹出层子窗体  
    |-- index.vue           // index 页面

创建之后，我们需要在pages.json 中配置内容，更多详情在  子窗体配置

|--subNVues:

          -  id: [String], 全局唯一，不能重复。
          -  path: [String], subNVue 子窗体的路径。
          -  type: [String], 内置的特殊子窗体类型，弹出(popup)和导航(navigationBar)。
          -  style: [Object], 配置子窗体的位置，背景等样式属性。

nvue与vue 的开放是有区别的，具体区别转至  nvue   uni-app官网     vue    uni-app官网 

在页面中使用子窗体

// 通过 id 获取 nvue 子窗体  
const subNVue = uni.getSubNVueById('map_widget')  
// 打开 nvue 子窗体  
subNVue.show('slide-in-left', 300, function(){  
    // 打开后进行一些操作...  
    //   
});  
// 关闭 nvue 子窗体  
subNVue.hide('fade-out', 300)

动态设置子窗体的样式

subNVue.setStyle({  
    top: '100px',  
    left: '20px',  
    width: '100px',  
    height = '50px',  
})

总结:

在使用子窗体途中，有时。在pages.json 中配置了窗体样式，但是效果确是没有显示出来，还得重新在页面中动态的去设置子窗体样式，可能是我开发工具没有保存问题，但是这个问题确实也是出现过....具体是哪里出现问题，我也不太清楚....另外我也是正在学习uni-app，在自己学习途中也会把稍微有趣的东西记录下来，另外偷偷的说，uni-app，坑有点多...