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 子窗体,建议控制在三个以内



相关文章
|
安全 Java Linux
Android反编译——jadx工具
Android反编译——jadx工具
2538 1
|
JavaScript
Electron如何调用.dll文件
Electron如何调用.dll文件
1800 0
Electron如何调用.dll文件
|
定位技术 开发者
uni-app获取地理位置
uni-app获取地理位置
2082 0
|
SQL 缓存 运维
PostgreSQL 事务号回卷分析
## XID 定义 xid 是个啥东西?xid 就是 PostgreSQL 里面的事务号,每个事物都会分配一个 xid。PostgreSQL 数据中每个元组头部都会保存着 插入 或者 删除 这条元组的事务号,即 xid,然后内核通过这个 xid 进行元组的可见性判断。简单理解,比如有两个事务,xid1=200,xid2=201,那么 xid1 中只能看到 t_xmin 200 的元组。 ```c
|
JavaScript 前端开发 小程序
uni-app subNVue 原生子窗体开发指南
uni-app subNVue 原生子窗体开发指南
1269 1
|
安全 前端开发 API
ThinkPHP5 API模块开发规范与示例
【7月更文挑战第6天】本技术文档旨在指导开发者如何完全遵循ThinkPHP5框架的开发规范来构建RESTful API模块。ThinkPHP5(简称TP5)是一款基于PHP的轻量级MVC框架,其简洁、高效的特点非常适合快速开发Web应用及API接口。以下是创建API模块的基本步骤、最佳实践以及代码示例。
1064 0
|
人工智能 JavaScript 开发工具
【完全免费】VS Code 最好用的 12 款 AI 代码提示插件!!!
🎉 探索12款免费VSCode AI代码提示插件:Codeium、Codegeex、CodeFuse、TONGYI Lingma、Comate、iFlyCode、Fitten Code、Bito AI、Mintlify Doc Writer、Kodezi AI、aiXcoder、IntelliCode。这些插件提供智能补全、代码生成、注释、优化,支持多种语言,提升编程效率!🚀👩‍💻👨‍💻
30900 121
|
iOS开发 开发者 Windows
uniapp云打包ios应用证书的获取方法,生成指南
打包用到的一共两个文件,一个是p12格式的私钥证书,一个是证书profile文件。其中生成p12证书的时候,按照官网的教程,是需要MAC电脑来协助做的,主要是生成一些csr文件和导出p12证书等。其实这些步骤也可以借助一些其他的工具来实现,不一定使用mac电脑,用windows电脑也可以创建。
1728 0
|
JavaScript 应用服务中间件 Linux
宝塔面板部署Vue项目、服务端Node___配置域名
本文介绍了如何使用宝塔面板在阿里云服务器上部署Vue项目和Node服务端项目,并配置域名。文章详细解释了安装宝塔面板、上传项目文件、使用pm2启动Node项目、Vue项目打包上传、以及通过Nginx配置域名和反向代理的步骤。
6402 2
宝塔面板部署Vue项目、服务端Node___配置域名

热门文章

最新文章