uniapp开发APP，map和video层级太高覆盖掉了我的cover-view怎么办？

最新推荐文章于 2023-11-08 21:48:18 发布
最新推荐文章于 2023-11-08 21:48:18 发布
阅读量1w 收藏 13
点赞数 6
分类专栏： APP uniapp map 文章标签： vue app uniapp uni-app 层级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/life_wanghexu/article/details/116049179
版权
uniapp 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
APP
1 篇文章 0 订阅
订阅专栏
map
1 篇文章 0 订阅
订阅专栏

uniapp开发APP，map和video层级太高，cover-view不生效，官方给出两种解决方案，

1.不使用vue，而是使用nvue开发

2.使用原生子窗体subNvue，其实也是类似nvue，只不过是nvue嵌在vue里面而已

nvue比较原生，样式css基于week写起来麻烦，我们可以先vue页面写了map，然后自定义原生子窗体subNvue，位置在页面左上角

 

下面是findType.nvue文件

记得它的样式，是week写法，不支持scss，less等写法。

然后下面就是APP里面的效果图了

 

 

王和旭
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
uniapp打包成安卓video标签层级问题
weixin_56475385的博客
07-04 240
uniapp打包成安卓video标签
uni-app的map层级问题封装.zip
09-18
在uni-app开发中，地图组件（Map）是一个常用的功能，特别是在构建移动应用时，它能够为用户提供导航、定位等服务。然而，在实际开发过程中，开发者可能会遇到地图层级问题，即地图与其他组件重叠或者交互不顺畅的...
【uniapp】原生子窗体subNvue的使用与踩坑
每天进步一点点, 靠近小目标一点点~
08-09 2025
覆盖原生组件, 官方给出解决办法一. 使用cover-view标签 二. 使用subNvue原生子窗体, 或者Nvue
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom", "app-plus": { "titleNView": false, //禁用原生导航栏 "subNVues": [{ "id": "subnvue", //顶部导航配置 "path": "pages/index/subnvue", "type": "navigationBar" }, { "id": "drawer", "path": "pages/index/drawer.nvue", // 配置分享弹窗 "style": {
uniapp的map组件层级过高 覆盖弹窗
CheriseZhou的博客
10-14 4223
有什么问题欢迎大家提~目前在map组件上叠加openlayers图层还没琢磨出来，欢迎大佬指导~
uniapp app端 | 关于map组件层级过高的解决办法
weixin_44524852的博客
11-08 3285
解决uniapp map组件层级过高的折中方案
uni-app的map组件和video组件层级过高问题
flower521528的博客
03-28 1894
1、直接使用nvue写，vue和nvue的渲染方式不一样，直接用nvue可以直接调整层级，可以覆盖住video和map组件。注意：nvue的和vue的css和标签的写法有很大的不一样，直接去查nvue的写法，写几个就会了。2、使用uni-app的原生窗体，在vue页面上覆盖一层nvue页面，也可以解决video和map的组件层级过高问题。3、对于uni-app自带的video组件，还有一种解决方法就是用一些视频播放的插件，这些插件一般都没有层级过高问题。
uniapp的video层级过高盖住其他非原生组件问题
cv1002420186的博客
05-10 903
把组件放到components里面，代码如下。
解决uniapp开发抖音小程序video-player覆盖问题，超详细教程，前端相关操作，已成功上线产品
最新发布
03-28
在uniapp框架中进行抖音小程序开发时，可能会遇到video-player组件覆盖问题，这通常是由于布局、样式冲突或者组件配置不当导致的。本教程将详细解析如何解决这一问题，并且已经成功应用于上线产品，确保方法的有效性...
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
09-11
在本文中，我们将深入探讨如何在 UniApp 中实现视图容器的随机拖拽滑动和放大缩小功能，主要关注 `movable-view` 和 `movable-area` 这两个组件。这两个组件是 UniApp 提供的用于创建交互式、可移动和可缩放视图的...
基于uni-app开发的新闻和资讯类App模板
02-22
【基于uni-app开发的新闻和资讯类App模板】 在移动互联网时代，新闻和资讯类App已经成为用户获取信息的重要渠道。为了快速开发此类应用，开发者通常会寻找高效的开发框架和模板来提升效率。其中，“基于uni-app开发...
uniapp 中map层级过高
前端-CV全粘工程师
07-21 5088
uniapp map 层级过高
解决 uniapp video视频组件层级过高，预览会覆盖其他组件的问题。
haliboti的博客
12-14 1万+
解决 uniapp video视频组件层级过高，预览会覆盖其他组件的问题。 解决方法： 1、将被覆盖的组件用nve页面的方法展示，就不会被覆盖了。 2、将video组件v-show隐藏，展示预览图片，点击预览视频时全屏播放视频即可。
uni-app使用视频播放组件层级过高会覆盖自定义组件等问题
add-oil的博客
12-01 3953
就简单描述一下吧，官网上说的较多的cover-view、nvue、subNvue、web-view等原生组件，就不做过多描述了，直接上官网看。 利用v-html解决的办法：（本次视频覆盖住了自定义头部就是采取的此种方式） <view v-html="contentVideo" @click="playVideo(contentVideo)"> data(){ return { contentVideo: `<video :src="${this.myVideoUrl}" s
uniapp 解决map覆盖不了问题
lixiaohua66的博客
11-30 2686
使用subnvue页面 1.在pages.json里面注册页面 { "path": "xxx", "style": { // "navigationBarTitleText": "任务" "app-plus": { "titleNView": false, "subNVues": [{//地图详情窗体 ...
uniapp上面使用map，video等组件层级太高处理方法
qq_36821274的博客
12-15 3989
参考：https://uniapp.dcloud.io/nvue-outline?id=nvue%e5%bc%80%e5%8f%91%e4%b8%8evue%e5%bc%80%e5%8f%91%e7%9a%84%e5%b8%b8%e8%a7%81%e5%8c%ba%e5%88%ab 当时第一次开发uniapp时，正好需求有个地图，因为层级太高导致样式的问题，找了好多方法，最后发现使用nvue可解决，所以还是需要好好看官方文档啊。 备注：nvue与vue的渲染引擎不同，有部分样式会造成渲染差异，nvue.
教你在uniapp中解决video组件在app端层级过高的问题
热门推荐
qq_41186730的博客
05-25 2万+
解决video层级过高，有两种方法 1.使用subNvue subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体 { "path": "pages/index/index", "style": { "app-plus": { "subNVues":[{
uniapp之cover-view使用
a666666000的博客
09-30 5795
uniapp真机echarts图层中心点击变色bug 解决：用cover-view
uniapp中video层级太高(或者在页面中不跟随页面滚动)解决方案
weixin_46579411的博客
12-19 6421
uniapp中video层级太高(或者在页面中不跟随页面滚动)解决方案
uniapp开发app中vue和nuve通讯web-view的区别
07-22
在Uniapp开发中，Vue和NVue是两种不同的组件渲染方式，它们在与web-view通信方面有一些区别。 1. Vue与web-view通讯：在Vue组件中使用web-view时，可以通过postMessage方法进行通信。你可以在Vue组件中监听web-view的message事件，并通过window.postMessage方法向web-view发送消息。这种方式适用于在Vue组件和web-view之间进行双向通信。 2. NVue与web-view通讯：NVue是Uniapp特有的渲染方式，它使用的是Native端的渲染技术，因此与web-view的通信方式略有不同。在NVue中，可以通过uni.postMessage方法向web-view发送消息，同时也可以通过uni.onMessage来监听web-view发送的消息。这种方式也可以实现双向通信。 需要注意的是，Vue和NVue之间的通信方式是不兼容的，因为它们使用了不同的渲染方式。如果你同时在Vue组件和NVue组件中使用web-view，需要分别处理它们的通信逻辑。 总结来说，Vue和NVue与web-view通信的方式有一些区别，具体选择哪种方式取决于你使用的渲染方式和项目需求。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值