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.rhkb.cn/news/348739.html

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

相关文章

UE5基础1-下载安装

目录 一.下载 二.安装 三.安装引擎 四.其他 简介: UE5&#xff08;Unreal Engine 5&#xff09;是一款功能极其强大的游戏引擎。 它具有以下显著特点&#xff1a; 先进的图形技术&#xff1a;能够呈现出令人惊叹的逼真视觉效果&#xff0c;包括高逼真的光影、材…

185.二叉树:二叉搜索树的最近公共祖先(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL) {}* };*/class Solution { public:// 函数用于寻找二叉搜索树中节点 p 和 q 的最低…

【python】OpenCV GUI——Trackbar(14.2)

学习来自 OpenCV基础&#xff08;12&#xff09;OpenCV GUI中的鼠标和滑动条 文章目录 GUI 滑条介绍cv2.createTrackbar 介绍牛刀小试 GUI 滑条介绍 GUI滑动条是一种直观且快速的调节控件&#xff0c;主要用于改变一个数值或相对值。以下是关于GUI滑动条的详细介绍&#xff1a…

如何利用智能家居打造一个“会呼吸的家”?一体化电动窗帘

如何利用智能家居打造一个“会呼吸的家”&#xff1f;一体化电动窗帘 史新华 隐藏式一体化智能电动窗帘与市面上其他窗帘不同的是&#xff0c;电机内置于轨道之中&#xff0c;一体化&#xff0c;美观、安静、滑动顺畅。 每次都会自动打开和关闭&#xff0c;相当漂亮。 众多家庭…

2002-2023年款别克君威 君威GS维修手册和电路图资料更新

经过整理&#xff0c;2002-2023年款别克君威 君威GS全系列已经更新至汽修帮手资料库内&#xff0c;覆盖市面上99%车型&#xff0c;包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图…

双Token方案实现Token自动续期(基于springboot+vue前后端分离项目)

文章目录 前言一、双Token方案介绍1. 令牌类型与功能2.双Token方案的优点3.实现流程 二、具体实现1.后端实现1.1 jwt工具类1.2 响应工具类1.3 实体类1.4 过滤器1.5 controller1.6 启动类 2、前端实现2.1 登录页面2.2 index页面2.3 请求拦截器和响应拦截器 效果展示 前言 更多j…

短剧APP小程序开发之小程序内存管理挑战:短剧缓存与释放策略探讨(第二篇)

在上一篇帖子中&#xff0c;我们探讨了小程序内存管理的限制以及缓存策略的设计。本篇将进一步探讨释放策略的具体实现以及优化方案&#xff0c;以支持大量短剧内容的加载和播放。 释放策略的具体实现 监听内存警告&#xff1a;小程序提供了监听内存警告的API&#xff0c;开发…

【译】SQLAlchemy文档:SQLAlchemy 统一教程

SQLAlchemy Unified Tutorial SQLAlchemy 是 Python SQL工具包和ORM&#xff0c;它为应用程序开发人员提供了 SQL 的全部功能和灵活性。它提供了一整套企业级持久性模式&#xff0c;专为高效和高性能的数据库访问而设计。 SQLAlchemy呈现为两层API&#xff1a;Core和ORM&…

【记录】ChatGLM3-6B大模型部署、微调(一):部署

ChatGLM3介绍 源码连接&#xff1a; ChatGLM3 是智谱AI和清华大学 KEG 实验室联合发布的对话预训练模型。ChatGLM3-6B 是 ChatGLM3 系列中的开源模型&#xff0c;在保留了前两代模型对话流畅、部署门槛低等众多优秀特性的基础上&#xff0c;ChatGLM3-6B 引入了如下特性&#xf…

如何高效管理和监控 Elasticsearch 别名及索引?

0、引言 在 Elasticsearch 项目中&#xff0c;管理和监控索引是开发者的一项重要任务。 尤其是当我们需要在项目的管理部分展示索引和别名的统计信息时&#xff0c;了解如何有效地列出这些别名和索引显得尤为重要。 本篇博客将介绍几种在 Elasticsearch 中列出别名和索引的方法…

7.Nginx动静分离

介绍 把动态和静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离。 动静分离从目前实现角度分为两种: 1.纯粹把静态文件独立成单独的域名,放在独立的静态资源服务器上,目前主流推崇的方案。 2.动态和静态文件混合在一起发布,通过nginx来分开。 通过loc…

【微信小程序】事件传参的两种方式

文章目录 1.什么是事件传参2.data-*方式传参3.mark自定义数据 1.什么是事件传参 事件传参:在触发事件时&#xff0c;将一些数据作为参数传递给事件处理函数的过程&#xff0c;就是事件传参 在微信小程序中&#xff0c;我们经常会在组件上添加一些自定义数据&#xff0c;然后在…

毕业年薪20w起!25届最近5南京邮电大学自动化考研院校分析

南京邮电大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试…

点云格式转化:将 ros PointCloud2格式数据转为livox CustomMsg格式

前言 览沃科技有限公司&#xff08;Livox&#xff09;成立于2016年。为了革新激光雷达行业&#xff0c;Livox致力于提供高性能、低成本的激光雷达传感器。通过降低使用门槛和生产成本&#xff0c;Livox将激光雷达技术集成到更多产品和应用之中&#xff0c;从而为自动驾驶、智慧…

数据挖掘丨轻松应用RapidMiner机器学习内置数据分析案例模板详解(下篇)

RapidMiner 案例模板 RapidMiner 机器学习平台提供了一个可视化的操作界面&#xff0c;允许用户通过拖放的方式构建数据分析流程。RapidMiner目前内置了 13 种案例模板&#xff0c;这些模板是预定义的数据分析流程&#xff0c;可以帮助用户快速启动和执行常见的数据分析任务。 …

AI “黏土画风”轻松拿捏,手把手带你云端部署 ComfyUI

作者&#xff1a;鸥弋、筱姜 AI 绘画领域&#xff0c;Stable Diffusion WebUI、Midjourney 、DALL-E 都聚拢了一大批的应用开发者和艺术创作者。ComfyUI 出现时间略晚&#xff0c;但是它让创作者通过工作流的方式&#xff0c;实现自动化水平更高的 AI 生图流程&#xff0c;一面…

ISO17025认证是什么?怎么做?

ISO17025认证是一种国际通用的实验室质量管理体系认证&#xff0c;其目标是确保实验室的技术能力、管理水平以及测试结果的可靠性和准确性达到国际认可的标准。该认证由国际标准化组织&#xff08;ISO&#xff09;和国际电工委员会&#xff08;IEC&#xff09;联合发布&#xf…

不停“整活”的零食很忙,怎么就跨入万店时代了?

6月12日&#xff0c;合并后的零食很忙、赵一鸣零食宣布&#xff0c;全国门店总数已突破10000家。同时&#xff0c;集团名称也变更为鸣鸣很忙集团。根据第三方机构弗若斯特沙利文认证&#xff0c;鸣鸣很忙集团全国门店数位居零食连锁行业第一。 在此之前&#xff0c;尽管零食很…

Photoshop 2024 mac/win版:探索图像处理的全新境界

Photoshop 2024是Adobe推出的最新图像处理与设计软件&#xff0c;它在继承了前作所有优秀特性的基础上&#xff0c;实现了多个方面的质的飞跃。这款软件凭借其卓越的图像处理性能、丰富的创意工具以及精确的选区编辑功能&#xff0c;成为了图像处理领域的佼佼者。 Photoshop 2…