首页 > 其他分享 >uniapp原生子窗体subNvue的使用

uniapp原生子窗体subNvue的使用

时间:2025-01-21 11:35:24浏览次数:1  
标签:原生 uniapp subNVue 属性 bottom 窗体 subNvue 页面

官网解释:

1.subNvue,是 vue 页面的原生子窗体,把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。

2.它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。

3.它也不是组件,就是一个原生子窗体。

使用场景:

  • 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏,比如 popup盖不住tabbar
  • 弹出层内部元素可滚动,
  • 在地图、视频等组件上的添加复杂覆盖组件:比如直播视频上覆盖滚动的聊天记录。

subNVue 子窗体引用的是 nvue 页面。所以 nvue 页面。nvue介绍

subNVue 子窗体的 pages.json 配置

pages.json 中,新增了 subNVues 节点, 与 titleNView 在同一级别。支持配置 subNVue 子窗体的相关属性。配置结构如下:

subNVues:

  • id: [String], 全局唯一,不能重复
  • path: [String], subNVue 子窗体的路径。
  • type: [String], 内置的特殊子窗体类型,弹出(popup)和导航(navigationBar)。一旦设置 type为navigationBar或 popup,position和dock 的值都会被忽略。
  • style: [Object], 配置子窗体的位置,背景等样式属性。
// 首页
        {
            "path": "pages/home/index",
            "style": {
                "navigationStyle": "custom",
                "backgroundColor": "#fff",
                "app-plus": {
                  "titleNView": false,
                    "subNVues": [
                        {
                            "id": "release", // 唯一
                            "path": "pages/home/uploadWay", // 页面路径
                            "type": "popup",
                            "style": {
                                "position": "absolute",
                                "mask": "rgba(0,0,0,0.5)",
                                "width": "750rpx",
                                "height": "609rpx",
                                "bottom": "0",
                                "background": "transparent"
                            }
                        }
                    ]
                }
            }
        },

style参数设置:

position 原生子窗体的排版位置,排版位置决定原生子窗体在父窗口中的定位方式。

"static",原生子窗体在页面中正常定位,如果页面存在滚动条则随窗口内容滚动;

"absolute",原生子窗体在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动;

"dock",原生子窗体在页面中停靠,停靠的位置由dock属性值决定。 默认值为"absolute"。

dock 原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效,可取值:"top",原生子窗体停靠则页面顶部;"bottom",原生子窗体停靠在页面底部;"right",原生子窗体停靠在页面右侧;"left",原生子窗体停靠在页面左侧。 默认值为"bottom"。

mask 原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效,可取值: rgba格式字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)",表示黑色半透明;

width 原生子窗体的宽度,支持百分比、像素值,默认为100%。未设置width属性值时,可同时设置left和right属性值改变窗口的默认宽度。

height 原生子窗体的高度,支持百分比、像素值,默认为100%。 当未设置height属性值时,优先通过top和bottom属性值来计算原生子窗体的高度。

top 原生子窗体垂直向下的偏移量,支持百分比、像素值,默认值为0px。 未设置top属性值时,优先通过bottom和height属性值来计算原生子窗体的top位置。

bottom 原生子窗体垂直向上偏移量,支持百分比、像素值,默认值无值(根据top和height属性值来自动计算)。 当同时设置了top和height值时,忽略此属性值; 当未设置height值时,可通过top和bottom属性值来确定原生子窗体的高度。

left 原生子窗体水平向左的偏移量,支持百分比、像素值,默认值为0px。 未设置left属性值时,优先通过right和width属性值来计算原生子窗体的left位置。

right 原生子窗体水平向右的偏移量,支持百分比、像素值,默认无值(根据left和width属性值来自动计算)。 当设置了left和width值时,忽略此属性值; 当未设置width值时,可通过left和bottom属性值来确定原生子窗体的宽度。

margin 原生子窗体的边距,用于定位原生子窗体的位置,支持auto,auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。

在页面中打开和关闭 subNVue 子窗体
// 通过 id 获取 nvue 子窗体  
_this.subNVue = uni.getSubNVueById('release')
// 打开 nvue 子窗体  
_this.subNVue.show('slide-in-bottom', 300);

// 关闭 nvue 子窗体  
_this.subNVue.hide('slide-out-bottom', 300)

// 动态修改 subNVue 子窗体位置,大小
subNVue.setStyle({  
    top: '100px',  
    left: '20px',  
    width: '100px',  
    height: '50px',  
})
subNVue 子窗体与 vue/nvue 页面通信

nvue 子窗体与使用子窗体的 vue/nvue 页面之间,可以互相发送和传递消息

// 监听消息
uni.$on('closepop-page', (data) => {
        formData.value = data
        if(this.subNVue) this.subNVue.hide('slide-out-bottom', 300)
})
// 发送消息
uni.$emit('closepop-page',formData);

示例: 选择上传方式的弹窗使用了subNVue子窗体.

 

 

注意事项:

1.一个vue页面不要加载太多 subNVue 子窗体,建议控制在三个以内,减少内存的消耗;

3.每个subNVue 页面都要在 pages.json 中注册;

2.当然如果一些简单的需求,如果 cover-view 已经能搞定,毕竟能跨端,内存占用也更低,cover-view不支持嵌套、只能在video、map上使用、样式和控件少;

4.plus.nativeObj.view也可以实现悬浮,更灵活,但易用性比较差、没有动画、不支持内部内容滚动。

 

 

 

 

 

 

 

 

 

 

标签:原生,uniapp,subNVue,属性,bottom,窗体,subNvue,页面
From: https://www.cnblogs.com/wq805/p/18683253

相关文章

  • uniapp——App 监听下载文件状态,打开文件(三)
    5+实现下载文件并打开这里演示,导出Excel表格文章目录5+实现下载文件并打开DEMO监听下载进度效果图为什么totalSize一直为0?相关Api:downloaderDEMO提示:请求方式支持:GET、POST;POST方式需要设置Content-Type;暂停下载任务:dtask.pause();取消下载任务:d......
  • uniapp获取元素高度不准确问题解决
    uniapp通过boundingClientRect获取的元素高度和实际高度差了不少,下面是复现和解决过程:我的代码: 得到的结果: 高度只有105用工具量一下: 实际有240px,遂gpt问下: 注意到了缩放比这个之前没想到的点,往下面看gpt更多的回复内容: 先获取系统缩放比,再乘以拿到的......
  • springboot小程序 uniapp基于Vue宏飞数码好物分享系统实现
    文章目录项目和技术介绍具体实现截图uniapp+hbuilderx错误处理和异常处理小程序框架以及目录结构介绍系统安全性java类核心代码部分展示软件测试数据完整性源码获取/详细视频演示项目和技术介绍微信开发者工具/hbuiderx后端语言支持以下技术栈:1java(SSM/springbo......
  • wx028基于springboot+vue+uniapp的网上花店小程序
    开发语言:Java框架:springboot+uniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9系统展示鲜花列表公告信息管理公告类型管理鲜花管理公告管理摘要网上花店微信小程序分为管理员还......
  • 基于java的SpringBoot/SSM+Vue+uniapp的高校校园招聘服务系统的详细设计和实现(源码+l
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • uniapp仿微信动态功能实现思路供参考
    1,创建三个数据表,一个朋友圈动态表,一个点赞表,一个评论表动态表创建 例如:dtlist包括用户uid,内容about,文字是否base64格式iszy,动态图片allimg,发布时间addtime(根据自己项目需要创建合适的字段)点赞表创建 例如:dzlist包括用户uid,点赞动态id:dtid,点赞时间addtime(根......
  • 【三江学院毕业论文】露营爱好者APP(基于SpringBoot+UniApp)的设计与实现
    注:仅展示部分文档内容和系统截图,需要完整的视频、代码、文章和安装调试环境请私信up主。摘 要随着计算机行业的不断发展,计算机的应用也在不断随着其发展速度进行着更新。而现今对于一个网络应用非常广泛的社会,商品采购管理对计算机管理商品采购要求更加紧密,更加完善,特别......
  • 2025-1-12至16-uniapp初体验
    2025-1-12今天主要就是在熟悉app开发软件应用,发现它的页面开发起来跟我们的web是一样的,初始界面就跟VScode操作一样,毕竟第一步是要做页面,然后它的控制台跟tomcat集成之后使用很像,之后就是复习一下web的css。盒子模型:margin:外边距控制边框离屏幕的距离(top上,left左等)paddi......
  • 前端异步在CRM窗体中的使用方式
    ##一、异步解决了什么问题?......
  • (二)C#同一个项目窗体应用程序复制粘贴窗体文件出现各种bug正确解决办法
        事情是这样的,如上图所示,因为一个系统里面有好几个子系统,有些子系统之间的“增删查改”又是相通的,于是想通过复制相同的窗体到另外一个文件夹的时候,如果不正确引用“新项目”将会出现以上各种错误。在网上搜索了各种方式,尝试了各种办法,最后找到下面这种亲测有效的解决......