uniapp开发APP如何使用subNVues(map,video组件必备技能)

在开发中,经常会遇到各种层级覆盖和原生界面自定义的问题:
原生导航栏渐变背景色、灵活自定义内容
覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏,比如 popup盖不住tabbar。
弹出层内部元素可滚动,
在地图、视频等组件上的添加复杂覆盖组件:比如直播视频上覆盖滚动的聊天记录。
在小程序中只能用 cover-view 来解决。
App中就有三种方法:
1、cover-view和cover-image
【缺点:a:cover-view 不支持嵌套、只能在 video、map 上使用、样式和控件少;
b:如果放在手机底部的话,当系统底部的三键导航栏显示和隐藏,cover-view作为控件是无法自己动的,就会出现被底部tab栏覆盖的情况,用js检测屏幕高度改变定位多麻烦就不说了。】
这个我写了半天,最后放弃了,遇到了一些坑也写了总结,有兴趣的可以看看
在这里插入图片描述
2、plus.nativeObj.view
但是plus.nativeObj.view 虽然更灵活,但易用性比较差、没有动画、不支持内部内容滚动。最重要的是太麻烦!!!
学习传送门—>https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
3、subNVue
uni-app已经支持 nvue 的原生渲染,我们何不做一个subNVue,来替代 cover-view实现更强的功能。

开始使用

第一步:
先了解一下subNVues,传输门==》(https://www.bookstack.cn/read/uniapp-api/3915c299c1c48f89.md),只有了解了用的才更顺手嘛
第二步:
在要使用 subNVue 子窗体的 pages.json 配置
在 pages.json 中,新增了 subNVues 节点, 与 titleNView 在同一级别。支持配置 subNVue 子窗体的相关属性。配置结构如下:
subNVues:
id: [String], 全局唯一,不能重复。
path: [String], subNVue 子窗体的路径。
type: [String], 内置的特殊子窗体类型,弹出(popup)和导航(navigationBar)。
style: [Object], 配置子窗体的位置,背景等样式属性。
代码示例:

{  
    "pages": [{  
        "path": "pages/index/index", //首页  
        "style": {  
            "app-plus": {  
                "subNVues":[{  
                    "id": "concat", // 唯一标识  
                    "path": "pages/index/subnvue/concat", // 页面路径  
                    /*"type": "popup",  这里不需要*/  
                    "style": {  
                        "position": "absolute",  
                        "dock": "right",  
                        "width": "100upx",  
                        "height": "150upx",  
                        "background": "transparent"  
                    }  
                }]  
            }  
        }  
    }]  
}

subNVue 更多详细的配置见===》
https://uniapp.dcloud.io/collocation/pages?id=app-subNVues
第三步:
注意上面的path填的路径是新建一个nvue文件的路径在这里插入图片描述
在需要弹出子窗体的页面,使用下面代码弹出页面

const subNVue = uni.getSubNVueById('tanchu'); // 通过 id 获取 nvue 子窗体 
subNVue.show('slide-in-top', 250); // 打开 nvue 子窗体

subNVue.hide隐藏。
如果不是作为一个弹窗,建议type不用写了。另外mask默认是透明的黑色遮罩,刚开始我没看清,折腾死了,后面我写成纯透明了,别写:‘transpasrent’,不然直接就是纯白色的了
在这里插入图片描述
更详细的使用:https://uniapp.dcloud.io/collocation/frame/subNVues?id=subnvuehide
第四步:
最后就是实现vue和nvue两个文件之间的数据传输,
自 HBuilderX 2.0.0 起支持 uni. e m i t 、 u n i . emit、 uni. emituni.on 、 uni. o n c e 、 u n i . once 、uni. onceuni.off ,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等。
示例:
监听事件
首先,在我的页面监听事件。

// 我的页面

onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
    },

因为事件监听是全局的,所以使用 uni. o n , 需 要 使 用 u n i . on ,需要使用 uni. on使uni.off 移除全局的事件监听,避免重复监听。

触发事件
进入登陆页面,触发事件

// 登陆页面

uni.$emit('login', {  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'unier',  
                login: true  
            });

使用 uni. e m i t 触 发 事 件 后 , 对 应 的 u n i . emit 触发事件后,对应的 uni. emituni.on 就会监听到事件触发,在回调中去执行相关的逻辑。
不清楚的可以看这:https://ask.dcloud.net.cn/article/36010
附上一个dome:https://ask.dcloud.net.cn/file/download/file_name-ZGVtby56aXA=__url-Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9hcnRpY2xlLzIwMTkwNjEzLzNhZjY2Y2JhMTc3YTM4YTM0Njk0MzliNjM1ZDU1N2M1

当然如果一些简单的需求,如果 cover-view 已经能搞定,那也没必要使用subNVue,毕竟能跨端,内存占用也更低。

强大的东西往往也意味着消耗更多内存,为了保证更好的性能体验,一个vue页面不要加载太多 subNVue 子窗体,建议控制在三个以内。

注意事项:
在使用 subNVue 子窗体的页面中,同时满足下面两种情形时:
页面包含 map, video 之类的原生组件
页面使用了 type 为 navigationBar 的 subNVue 子窗体

原生组件可能会出现错位的问题,目前可以使用以下方法进行解决:
将此类元素放在页面的 onReady 中进行渲染。
采用延时的策略,保证元素在页面渲染后,再去定位位置。

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页