uniapp原生子窗体subNvue的使用超容易理解的总结,解决覆盖不了视频或者地图等层级问题

简介: uniapp原生子窗体subNvue的使用超容易理解的总结,解决覆盖不了视频或者地图等层级问题

subNvue 自1.9.10 起支持 ,仅支持 app 平台


subNVues 是 vue 页面的原生子窗体。用于解决App中 vue 页面中的层级覆盖和原生界面灵活自定义用的。


它是一个 nvue 页面,使用 weex 引擎渲染,方便自定义原生导航或覆盖原生地图、视频等


虽然有cover-view来覆盖原生组件,但是在app-vue中不支持嵌套,且只能在map、video组件使用,这个时候用原生子窗体是比较适合的


1.首先配置pages.json(我这里引用官方的一个配置案例)


{ 
 "pages": [{
        "path": "pages/index/index", //首页
        "style": {
                "subNVues":[{//侧滑菜单
                    "id": "drawer", //subNVue 的 id,可通过 uni.getSubNVueById('drawer') 获取
                    "path": "pages/index/drawer.nvue", // nvue 路径
                    "style": { //webview style 子集,文档可暂时开放出来位置,大小相关配置
                        "position": "popup", //除 popup 外,其他值域参考 5+ webview position 文档
                        "width": "50%"
                    }
                }, {//弹出层
                    "id": "popup",
                    "path": "pages/index/popup",
                    "style": {
                        "position": "popup",
                        "margin":"auto",
                        "width": "150px",
                        "height": "150px"
                    }
                }]
            }
    }]
}

注意:

  • subNVuesid 是全局唯一的,不能重复
  • 可以通过 uni.getSubNVueById('id') 获取 subNVues 的实例
  • subNVuespath 属性只能是 nvue 文件路径

更多配置请看 官方文档

2.创建完毕之后使用原生子窗体

image.png

在一个项目文件夹下建一个,专门存放subNvue原生子窗体的文件夹

3.在vue页面引用原生子窗体

loadfun(e){
      let drawer = uni.getSubNVueById('drawer');//通过 ID 获取 subNVues 原生子窗体的实例
      uni.$emit('senddata',this.swiperlist[e])
           //我下面用的等同于uni.getSubNVueById('drawer').show,show是显示
      drawer.show('zoom-fade-out', 200,()=>{//第一个参数指定动画,我这里设置的是新窗体逐渐放大
             //第二个参数执行时间,第三个参数是执行完的回调
      })
    },


4.在窗体页面设置隐藏窗体的函数

1.mounted() {
      let _this = this;
      uni.$on('senddata', (e) => {
        _this.infos = e;
      })
    },
    methods: {
      toSecondPage() {
        // 先关掉drawer再进行跳转,因为subNVue会在其它页面也存在
        uni.getCurrentSubNVue().hide('slide-out-left');
              //slide-out-left新窗体从左侧进入隐藏
      }
    }

更多动画类型也可参考动画类型


补充:


subNvue.postMessage()可以发送消息


subNvue.onMessage()可以监听消息,这种通讯方式已过时


所以我在这里传参用的是uni.$emit和uni.$on


虽然subNVue 比cover-view和plus.nativeObj.view更强大,也占用更多内存,为了保证更好的性能体验,一个vue页面不要加载太多 subNVue 子窗体,建议控制在三个以内



相关文章
|
API 图形学
Winform控件优化之自定义控件的本质【从圆角控件看自定义的本质,Region区域无法反锯齿的问题】
自定义控件的本质只有两点:重绘控件Region区域(圆角、多边形、图片等),这是整个控件的真实范围;重绘图形,在原有Region范围内,重绘不同的图形(圆角、多边形、图片等)作为背景......
581 0
Winform控件优化之自定义控件的本质【从圆角控件看自定义的本质,Region区域无法反锯齿的问题】
|
11月前
|
小程序 前端开发 JavaScript
微信小程序(二十二)子组件调用父组件方法,父组件调用子组件方法
制作了一个自定义组件,底部弹出菜单。 显示这个菜单的时候,首先,父组件需要调用子组件的方法,显示子组件。 点击子组件的菜单,需要调用父组件的方法进行逻辑处理。
297 0
|
14天前
|
UED 开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(位置设置)
在HarmonyOS next中,ArkTS提供了align、direction、position、markAnchor、offset和alignRules等通用属性,用于精确控制组件在用户界面中的位置和布局。本文详细解读了这些属性,并提供了示例代码进行说明。通过这些属性,开发者可以实现精确布局、动态界面调整和提升用户体验。
56 6
|
14天前
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(图片边框设置)
在HarmonyOS 5.0中,ArkTS提供了灵活的图片边框设置属性,使开发者可以为应用中的图片组件添加各种边框效果,提升视觉效果和用户体验。本文详细解读了ArkTS中图片边框设置的通用属性,并提供了示例代码。通过设置`borderImage`属性,可以控制边框的图源、切割宽度、边框宽度、延伸距离、平铺模式和是否填充。示例代码展示了如何使用这些属性来创建具有不同边框效果的图片组件。图片边框设置在美化界面、区分内容和增强交互方面有重要作用。
41 5
|
17天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(栅格设置)
在HarmonyOS 5.0中,ArkTS的栅格系统提供了强大的布局能力,使界面设计更加灵活和响应式。本文详细解读了ArkTS中栅格设置的通用属性,如useSizeType、gridSpan和gridOffset,并通过示例代码展示了如何使用这些属性来创建响应式布局。
73 1
|
17天前
|
开发者
鸿蒙next版开发:ArkTS组件通用属性(菜单控制)
在HarmonyOS 5.0中,ArkTS引入了灵活的菜单控制属性,支持通过长按、点击或鼠标右键触发弹出式菜单,增强用户交互体验。本文详细介绍了bindMenu和bindContextMenu方法,以及MenuItem的配置属性,并提供了示例代码,帮助开发者更好地理解和使用这些功能。
99 1
|
2天前
|
UED
Qt侧边栏的动态展示:隐藏与呈现技术详解
在现代用户界面设计中,侧边栏(Sidebar)是一个常见的组件,它为用户提供了便捷的导航和操作入口。在Qt框架中,实现侧边栏的隐藏与呈现不仅能够提升应用的美观度,还能增强用户体验。本文将详细介绍如何在Qt中实现侧边栏的动态隐藏与呈现,包括技术要点和代码实现。
10 0
|
2月前
|
前端开发 PHP
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局
本文介绍了ThinkPHP6中实现模板布局的三种方式:全局配置方式、模板标签方式和动态方法布局,并通过示例代码展示了如何在项目中应用这些布局方式。
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局
|
JSON 小程序 JavaScript
小程序中如何使用自定义组件应用及搭建个人中心布局
小程序中如何使用自定义组件应用及搭建个人中心布局
68 0
|
6月前
【sgSearch】自定义组件:常用搜索栏筛选框组件(包括表格高度变化兼容)。
【sgSearch】自定义组件:常用搜索栏筛选框组件(包括表格高度变化兼容)。