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" } }] } }] }
注意:
-
subNVues
的id
是全局唯一的,不能重复 - 可以通过 uni.getSubNVueById('id') 获取
subNVues
的实例 -
subNVues
的path
属性只能是nvue
文件路径
更多配置请看 官方文档
2.创建完毕之后使用原生子窗体
在一个项目文件夹下建一个,专门存放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.在窗体页面设置隐藏窗体的函数
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 子窗体,建议控制在三个以内