uniapp视频组件层级太高,解决方法使用subNvue原生子体窗口

目录

前言

先看一下uniapp官网的原话:

subNvue的一些参数介绍

subNvues使用方法:

绑定id 显示 subNvue 弹出层

subNvue.show() 参数信息

subNvue.hide() 参数信息

在使用subNvue 原生子体窗口 遇到的一些问题


前言

nvue 兼容性 以及使用方式

  1. 控制隐藏显示 不能使用v-show 只能用v-if  如果想要实现隐藏时占位,可以用css 属性值隐藏显示 visibility:visible;显示  visibility:hidden;隐藏,第二种就是display: block;显示 display: none;隐藏。
  2. nvue 只能使用flex 布局 。
  3. 文字内容必须用text包裹住 不能在div 或者view 里面直接写文字 否则即使渲染了,也无法绑定 js 里的变量。
  4. 布局不能使用百分比、没有媒体查询。如果想要全屏展示 宽度直接设置750rpx,高度想要沾满全屏可以使用 系统信息
     uni.getSystemInfo({success: (info) => {// 设置屏幕高度this.screenHeight = info.windowHeight;}
    })
    
  5. nvue 不支持背景图 就是 background-image: url('../.././image/45.png')
  6. nvue 的各组件在安卓端默认是透明的,如果不设置background-color,可能会导致出现重影的问题。(注意在pages.json文件里subNVues数组里面 必须也设置上"mask":"rgba(0,0,0,0)", 要两个同时设置才不会出现重影的问题)。
     
  7. nvue 不支持 css 预处理器,css选择器也不要用, 也有许多样式不支持会提示。
     

官网链接:nvue介绍 | uni-app官网

先看一下uniapp官网的原话:

subNvue,是 vue 页面的原生子窗体,把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件,就是一个原生子窗体。

官网链接:uni-app官网

subNvue的一些参数介绍

subNvue的 id是全局唯一的,不能重复。后面需要用 uni.getSubNVueById(id名称) 来获取id

subNvue的 path 只能是nvue 文件路径 其他的不行。

subNvue的 type 可取值:'popup' 和 'navigationBar'。

subNvue的 style 样式属性

subNvues使用方法:

在pages.json中的 app-plus 下  使用具体如下 看图

绑定id 显示 subNvue 弹出层

在pages.json 文件中 配置好以后

在你引入 .nvue 的 主页面中 使用 uni.getSubNVueById(id) 绑定 你之前的id

再使用 subNVue.show() 显示弹出层。看图

subNvue.show() 参数信息

show()这里面有三个参数 

你们也看到了我这里加了一个延时器 0.5秒 执行!如果我不加这个延时器,直接让他在页面渲染完成后执行,是不显示弹出层的!目前还不知道什么原因导致。

subNvue.hide() 参数信息

subNVue.hide('slide-out-left',200);
在使用subNvue 原生子体窗口 遇到的一些问题

解决重影问题

nvue 的各组件在安卓端默认是透明的,如果不设置background-color,可能会导致出现重影的问题

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

一开始 我没设置 type 他是有一层 黑色半透明背景 之后我加了"rgba(0,0,0,0.0)"  我把透明度改成0.0也不行,后来上网查寻 必须和 mask 同时使用, 才能彻底生效

"mask":"rgba(0,0,0,0)",
"background": "rgba(0,0,0,0)" 

性能

官网上说  原生子体窗口 一个页面引入三个就行,太多会因引起 卡顿 或者性能问题。

安卓系统上物理键返回,subnvue会关闭。

解决:

created() {//安卓系统上物理键返回,subnvue会关闭,用一下方法禁用 里面还可以编写逻辑?plus.key.addEventListener("backbutton", function() {console.log('backbutton');});},

 在APP 端禁止触摸 某一个区域

因为某种原因 要禁止用户触摸,@touchmove.stop.prevent 加上以后view 里面所有的 都触摸不到!

<view @touchmove.stop.prevent><view/>

查看版本信息 这个代码只在APP 端有用

const version = plus.runtime.version;//获取当前版本 在APP端显示

h5 出现视频加载慢 或者卡顿 可以用

<link rel="preload" href="视频路径" as="video">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24314.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

把ROS程序作为桌面图标双击启动

1 写launch文件 把ROS程序写成一个launch文件&#xff0c;例如 powerline_with_rviz.launch <launch><!-- Load camera parameters --><rosparam file"$(find choose_powerline)/config/camera_params.yaml" command"load"/><!-- …

深入理解并应用KTT求解约束性极值问题

KT 很简单&#xff0c;口诀记心端&#xff0c;等式求最优&#xff0c;不等式验证——小飞打油 以后每期尝试编一句口诀&#xff0c;帮助大家记忆&#xff0c;可以是打油诗&#xff0c;也可以是类似“奇变偶不变&#xff0c;符号看象限”的口诀&#xff0c;如果编的不好&#xf…

Docker 常用命令以及镜像选择

目录 1.Docker基本组成 2.镜像选择 2.1、镜像推荐选择方案 2.2版本选择 3.Docker 命令 3.1镜像管理 拉取镜像&#xff1a; 列出镜像&#xff1a; 删除镜像&#xff1a; 构建镜像&#xff1a; 3.2容器管理 运行容器 列出运行中的容器和所有容器 停止容器 启动重启…

为什么要将Modbus转成MQTT

什么是Modbus Modbus 是一种串行通信协议&#xff0c;最初由Modicon&#xff08;现在的施耐德电气Schneider Electric&#xff09;于1979年开发&#xff0c;用于可编程逻辑控制器&#xff08;PLC&#xff09;之间的通信。Modbus协议设计简单&#xff0c;易于部署和维护&#xf…

从零入手人工智能(2)——搭建开发环境

1.前言 作为一名单片机工程师&#xff0c;想要转型到人工智能开发领域的道路确实充满了挑战与未知。记得当我刚开始这段旅程时&#xff0c;心中充满了迷茫和困惑。面对全新的领域&#xff0c;我既不清楚如何入手&#xff0c;也不知道能用人工智能干什么。正是这些迷茫和困惑&a…

M1Pro 使用跳板机

Mac (M1 Pro) 通过Iterm2 使用跳板机 1、由于堡垒机&#xff08;跳板机&#xff09;不能支持mac系统终端工具&#xff0c;只支持xshell等win生态。所以我们需要先安装iterm2 装iterms教程 这里头对rz、sz的配置不详细。我们可以这样配置&#xff1a; where iterm2-send-zmod…

Windows 11中删除分区的几种方法,总有一种适合你

序言 想从Windows 11 PC中删除一个分区,以便将空间重新分配给现有分区或创建一个新分区吗?我们将为你介绍删除Windows 11分区的多种方法。 删除Windows上的分区时会发生什么 删除分区时,Windows会擦除该分区的内容,并将该分区从电脑上的任何位置删除。你将丢失保存在该分…

单元测试覆盖率

什么是单元测试覆盖率 关于其定义&#xff0c;先来看一下维基百科上的一段描述&#xff1a; 代码覆盖&#xff08;Code coverage&#xff09;是软件测试中的一种度量&#xff0c;描述程序中源代码被测试的比例和程度&#xff0c;所得比例称为代码覆盖率。 简单来理解&#xff…

C语言实现map数据结构 key—value对应

1.首先43行 createKeyValuePair(char*key ,int value)这个函数就是给一个keyValuePair *pair的指针来通过内存分配将数据key和value存入这个pair指针所对应的内存空间 2.52行freeKeyValuePair这个函数是释放内存空间 3.头文件 struct结构体KeyValuePair就是一个指针一个值 4…

GO语言 服务发现概述

https://zhuanlan.zhihu.com/p/32027014 明明白白的聊一下什么是服务发现-CSDN博客 一、服务发现 是什么 在传统的系统部署中&#xff0c;服务运行在一个固定的已知的 IP 和端口上&#xff0c;如果一个服务需要调用另外一个服务&#xff0c;可以通过地址直接调用。 但是&…

软件巨头SAP裁员优厚条件,吸引5300名员工争相离职

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 在科技行业的大潮中&#xff0c;SAP公司近日因一项颇具争议的裁员计划而备受瞩目。但这次裁员风波并未如往常般引发员工的强烈抗议&#xff0c;反…

msvcr120.dll丢失怎样修复?为什么msvcr120.dll文件很重要

msvcr120.dll​ 是一个属于 Microsoft Visual C 2013 Redistributable package 的动态链接库文件。这个文件对于运行使用 Visual Studio 2013 开发的应用程序是必要的&#xff0c;因为它包含了C运行时库的一部分功能&#xff0c;这些功能是标准C库中与输入/输出操作、字符串操作…

OpenCV中的圆形标靶检测——斑点检测算法(二)

前面的章节中我们已经大致介绍了算法流程,也对一些算法中用到的相关概念做了简要介绍,同时给出了算法调用的API,现在我们开始算法检测接口实现源码的分析。 1. 斑点的分组与加权 这里我们选择后者,先了解算法的处理流程,再分析各个模块的实现。算法流程图如下图所示,上一…

android中调用onnxruntime框架

创建空白项目 安装Android Studio及创建空白项目参考&#xff1a;【安卓Java原生开发学习记录】一、安卓开发环境的搭建与HelloWorld&#xff08;详细图文解释&#xff09;_安卓原生开发-CSDN博客 切记&#xff1a;build configuration language 一定选择Groovy&#xff01;官…

51单片机-LCD液晶显示

目录 前言: 一. LCD1602模块简介 二. 代码功能实现 三.总结 前言: 本文主要是51单片机的LCD液晶显示,使用的是LCD1602.下面是详细介绍和完整代码,欢迎大家的点赞,评论和关注.感谢. 一. LCD1602模块简介 LCD1602 模块具有以下特点&#xff1a; 显示特点&#xff1a; 可以…

企业建站响应式网站建设平台版源码系统 海量模版可选择 带完整的安装代码以及搭建教程

系统概述 企业建站响应式网站建设平台版源码系统是一款集创新性、实用性和便捷性于一体的建站解决方案。它旨在为用户提供一站式的网站建设服务&#xff0c;无论你是新手还是经验丰富的开发者&#xff0c;都能通过该系统轻松实现网站的构建与部署。 该系统采用先进的技术架构…

单链表复习 (C语言版)

目录 一.顺序表与链表的区别 二.链表概念 三.单链表 1.单链表的开始与初始化 2.单链表的打印 3.单链表的尾插 重难点&#xff1a;单链表实现时的指针详解 4.单链表的头插 5.单链表的尾删 6.单链表的头删 小结&#xff1a; 7.单链表的查找 8.在指定位置前插入数据 …

GitHub工程获取第三方PR操作

GitHub工程获取第三方PR操作 1. 源由2. 获取第三方PRStep 1&#xff1a;安装ghStep 2&#xff1a;获取个人TokenStep 3&#xff1a;通过git协议获取代码Step 4&#xff1a;获取第三方PR分支 3. 总结 1. 源由 通常来说&#xff0c;GitHub上通常有三种场景&#xff1a; 工程管理…

冯喜运:6.8下周伦敦金行情怎么看?黄金原油下周操作建议

【黄金消息面分析】&#xff1a;黄金不是由通胀驱动的。它也不是由通货紧缩驱动的。它也不是由美元驱动的。当股市反弹时&#xff0c;它也不会下跌&#xff0c;反之亦然。黄金是由市场情绪驱动的。而且&#xff0c;它是黄金市场上唯一的常数&#xff0c;使人们能够对黄金价格趋…

c++使用_beginthreadex创建线程

记录使用_beginthreadex()&#xff0c;来创建线程。方便后期的使用。 创建一个线程 相关函数介绍 unsigned long _beginthreadex( void *security, // 安全属性&#xff0c; 为NULL时表示默认安全性 unsigned stack_size, // 线程的堆栈大小&#xff0c; 一般默认为0 u…