【subNVue】uni-app手机调试无法显示地图Map之外组件的问题及解决

已于 2022-02-15 14:36:52 修改
阅读量3.5k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： uni-app
于 2021-07-06 16:33:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xhltk316/article/details/118522434
当使用uni-app开发时，发现在手机APP调试中地图组件会覆盖其他元素，官方解决方案在小程序有效但APP无效。通过研究，发现可以利用原生子窗体subNVue，将地图组件单独封装为nvue页面，以popup形式展示，避免了重写整个页面。详细步骤包括配置页面、新建nvue页面、组件调用和数据传输。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述

参照官网在<map>标签里嵌套使用<cover-view>，在浏览器调试（包括微信小程序）可以正常使用，但是在手机APP调试时无法正常显示，一顿百度之后找到原因是vue页面的地图会默认置位最顶层，甚至连导航栏都会覆盖掉，而<cover-view>只适用于小程序且修改z-index也不管用。有的资料说使用nvue页面代替vue页面可以实现，但是nvue页面局限太大，很多东西都无法使用，如导入的ColorUI、onload时获取组件高度宽度甚至api在手机app中都无法调用，因此并不想把写好的整个页面都重写。然后发现了 原生子窗体subNVue，只需要将需要的组件写成nvue页面，以一个原生的popup弹出组件，省去了不少烦恼和工作量。

解决方案

将组件单独写成nvue页面并使用

step1：配置页面

修改page.json文件，添加nvue页面的路径，如：

{
   
     
    "pages": [{
   
     
        "path": "pages/map/map", // 地图目录  
        "style": {
   
     
        	"navigationStyle"
最低0.47元/天 解锁文章

200万优质内容无限畅学
uniapp引入高德地图或腾讯地图以及map在真机中常见问题汇总
qq_43869364的博客
07-07 1492
以下是必须肯定会用到的官方地址 腾讯地图API开发文档：微信小程序JavaScript SDK | 腾讯位置服务 (qq.com) 高德地图API开发文档：开发 | 高德地图API (amap.com) 高德地图小程序配置指南：入门指南-微信小程序插件|高德地图API (amap.com) 小程序后台：微信公众平台 (qq.com) 有了这些地址，那么你就可以根据你的需要选择一个地图进行以下操作...
uni-app的map层级问题封装.zip
09-18
总的来说，这个压缩包提供了一种解决uni-app中地图层级问题的实践案例，对于学习uni-app和地图组件的开发者来说，是一个有价值的参考资料。通过深入研究这个封装，我们可以更好地理解和掌握uni-app的组件管理、事件...
uniapp map上添加浮层无法显示问题？
m0_65730686的博客
09-09 1421
uniapp map上添加浮层无法显示问题？
uniapp中map组件不显示
weixin_68819649的博客
03-31 3208
map地图组件在H5端不显示，要去manifest.json中进行勾选配置，并且申请一个key。
【UniApp踩坑记录】在subNvue页面中使用Map，添加marker后不显示
Alan_Walker688的博客
05-11 2780
uniapp subNvue页面中使用 map 后发现 marker 不显示的问题及解决
uni-app打包后安卓不显示地图及相关操作详解
会飞的猪0629
08-22 3604
uni-app在浏览器调试map地图正常，但是打包后安卓端不显示的问题解决
uniapp 解决map覆盖不了问题
lixiaohua66的博客
11-30 2940
使用subnvue页面 1.在pages.json里面注册页面 { "path": "xxx", "style": { // "navigationBarTitleText": "任务" "app-plus": { "titleNView": false, "subNVues": [{//地图详情窗体 ...
uni-app腾讯地图显示定位
06-27
【uni-app腾讯地图显示定位】 在移动应用开发中，定位功能是常见的需求，尤其是在本地服务、导航或基于位置的应用中。uni-app是一个跨平台的前端框架，它允许开发者使用一套代码来实现多端运行，包括iOS、Android、...
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
很好用的uni-app节点树组件！
06-23
【标题】"很好用的uni-app节点树组件！" 暗示了这是一个基于uni-app框架的组件，专用于创建和展示树形结构的数据。uni-app是一个多端开发框架，可以编写一次代码，同时发布到iOS、Android、H5、小程序等多个平台。这...
高德地图使用uniapp运行到手机不显示解决方式
hmlqhhhhhhhhh的博客
04-02 2145
key 和密钥都配置完，但手机上仍不显示。
uni-app中，map组件marker图标在手机端第二次进入不显示问题
m0_51420354的博客
06-20 1747
uni-app中，map地图组件图标不显示
Uni-Appmap组件地图选点问题，不显示或者地点有偏差
m0_61923634的博客
04-06 2225
map组件报错：[Component] : latitude 字段取值有误，纬度范围应为 -90 ~ 90
uniapp打包APP打开地图功能无法出现
spring_007_999的博客
09-05 1803
uniapp打开地图失败
uni-app或微信小程序地图等最高层级挡住自己的view的解决方法
热门推荐
anlixi的博客
12-30 1万+
解决uni-app或微信小程序地图等z-index无效的办法之一 uni-app或微信小程序地图都是最高层级，z-index无效，局限性又太大了。怎么办呢？直接设置高度肯定是没办法的，我就想换一个思路来解决这个问题。 确实地图/视频等在最上面，自己的会被挡住。那么让地图组件消失不久好了… 就是这个思路了，要显示自己的组件时让地图暂时消失，用一个相同大小的或图片占位显示。自己组件消失后再将地图显示粗...
uniapp 使用subNVue原生子窗体解决web-view等原生页面中弹框无法显示的问题
theScoreONE的博客
10-12 4211
问题: 使用web-view或者video组件时，h5端的编写的fixed布局或其他popup弹框页面无法显示 解决方案：使用subNVue这个原生子窗体的方法去解决APP端打开弹窗显示弹窗被覆盖 注意事项： 1、subNVue这个原生子窗体的后缀必须是.nue 2、样式不支持scss，只能一个个样式.className {} 不能嵌套 3、subNVue只支持在手机上运行 官方：uni-app subNVue 原生子窗体开发指南 一、创建一个shareSubNVue文件夹，文件夹下创建一个p.
uniapp 引入组件踩坑：引入组件后，h5可以正常显示，但是打包后不显示
lengxiaoying的博客
10-08 899
引入组件后，h5可以正常显示，但是打包后不显示。
记录微信小程序转uniapp-app端之map遮罩层级的问题
牧xin的博客
07-10 4078
微信小程序可以在<map>的上层放置需要的窗体,如: <view class="map_box"> <map id="navi_map" scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" latitude="{{latitude}}" bindcallouttap="bindcallouttap" longitude="{{longitud
uniapp 使用 nvue 加载map地图
weixin_43073383的博客
08-25 2260
由于uniapp map经纬度再次赋值 地图空白bug 和 普通vue地图不能操作markers label，故临时使用nvue 载入地图，记录一下使用方法。
真及调试，video还是会随机位置滑动的时候
最新发布
07-03
<think>问题描述：在真机调试时，使用swiper滑动切换视频，video组件会随机位置滑动（即位置不稳定，可能会跳动或错位）。可能的原因：1.原生组件（如video）在App端层级最高，但swiper滑动时，由于渲染机制，可能导致video组件在滑动过程中脱离预期位置。2.样式问题：可能是由于布局或样式导致的位置计算错误。3.滑动切换时的渲染延迟或异步问题。解决方案：1.确保使用cover-view和cover-image覆盖在video上，避免使用普通view。2.检查样式，确保video容器和swiper-item的尺寸正确，并且video组件宽高设置为100%。3.在滑动切换时，暂停上一个视频并立即隐藏（或移除），同时只渲染当前活动的视频。4.尝试在App端使用延时切换，确保渲染完成。根据之前的代码，我们已经做了以下优化：-使用v-if="index ===current"只渲染当前视频。-使用cover-view覆盖在视频上。-在App端增加50ms延迟切换。如果问题仍然存在，我们可以尝试以下额外措施：措施1：在滑动开始和结束时控制视频的显示-在swiper的@transition事件中隐藏非当前视频（或暂停并移除）-在@animationfinish事件中显示当前视频但是，注意uni-app的swiper组件没有提供类似的事件，所以我们可以考虑使用@change事件和@touch事件结合。措施2：使用绝对定位，并确保视频容器没有受到父容器样式影响（如transform）。措施3：尝试给video组件设置固定的宽高，避免使用百分比。措施4：在App端，使用subNVue代替原生组件，但这样会复杂很多。考虑到时间，我们先尝试在现有基础上优化：修改点：1.在swiper-item上设置transform: translate(0,0)来避免一些渲染问题。2.确保video的父容器（.video-wrapper）没有设置transform样式，因为transform会导致原生组件渲染异常。3.在滑动过程中，将非当前视频隐藏（通过v-if），但注意我们已经在swiper的change事件中做了切换。但是，由于swiper的滑动是连续的，我们可能需要在滑动过程中就隐藏上一个视频，只保留当前和下一个？但这样可能会影响性能。另一种思路：在滑动开始时暂停所有视频，并隐藏所有非当前视频，然后滑动结束后再显示当前视频并播放。但这样可能会导致滑动过程中视频区域空白。鉴于问题在真机调试时出现，我们尝试以下代码调整：修改样式：.swiper-item {transform:translate3d(0,0,0);}//开启GPU加速，避免渲染问题.video-wrapper{ position: absolute; top:0; left:0; width:100%; height:100%; }修改逻辑：在滑动过程中，我们只保留当前和下一个视频的渲染（预加载一个），其他都销毁。但uni-app的swiper组件默认会缓存相邻的item，所以我们可以通过设置next-margin和previous-margin来控制预加载的区域，然后通过current和相邻index判断是否渲染。但是，由于问题描述为“随机位置滑动”，可能是由于视频组件在滑动过程中被重新创建时位置计算错误。因此，我们尝试给每个视频容器一个固定的key，并确保样式正确。具体代码调整如下：1.样式调整：```css.swiper-item{position:relative;transform: translate3d(0,0,0);overflow: hidden;}.video-wrapper {position: absolute;top:0;left:0;width:100%;height:100%;z-index:1;}```2.逻辑调整：我们之前已经只渲染当前视频，所以可能是销毁和创建的时间差导致。尝试在滑动开始前（touchstart）暂停当前视频，然后滑动结束后再播放新视频。由于uni-app的swiper没有提供touch事件，我们可以在外层容器添加touch事件监听。但是，这样会破坏组件封装，所以我们可以尝试使用@touch事件绑定在swiper上，但swiper本身不支持。因此，我们换一种方式：在@change事件中，我们除了切换视频，还确保上一个视频被销毁（通过v-if）。我们已经在@change事件中暂停并销毁了上一个视频（通过设置v-if），所以问题可能在于新视频的创建需要时间，导致在滑动过程中出现空白或错位。此时，我们可以尝试在滑动过程中使用占位图（比如一张封面图）来代替视频，直到滑动结束并且新视频加载完成。但这样会改变交互。考虑到问题复杂性，这里提供一个更稳定的方案：使用列表渲染而非swiper，通过监听touch事件实现类似抖音的滑动切换。但这样需要自己实现滑动逻辑，比较复杂。鉴于时间，我们先在现有swiper基础上优化，如果问题依旧，可能需要考虑自定义滑动视图。由于问题描述比较模糊，我们只能给出一些可能的优化方向。以下代码尝试在滑动过程中隐藏视频，等滑动结束再显示：修改swiper的change事件处理函数： ```javascriptconst onSwiperChange= (e)=> {constindex =e.detail.current;//暂停当前视频并隐藏if(videoContext){videoContext.pause();videoContext= null;}//设置一个标志表示正在切换，隐藏视频isSwiping.value =true;setTimeout(() =>{current.value= index;isSwiping.value =false;//加载新视频loadVideo(index);},isApp.value ?100:0);}; ```然后在模板中，视频容器根据isSwiping状态决定是否显示（可以用v-show）：<videov-if="index=== current&& !isSwiping"...></video>但这样在滑动过程中视频会消失，然后滑动结束后出现，可能会闪烁。另一种方法：在滑动过程中，给视频容器设置一个很大的z-index负值，让它隐藏，但这样可能无效，因为原生组件层级高。因此，我们回到最初的问题：可能是由于视频组件的渲染时机和swiper滑动不同步。我们尝试在swiper-item上添加一个key，强制重新创建：<swiper-itemv-for="(video, index) invideoList" :key="video.id">//使用唯一id确保每个swiper-item有唯一的key。如果这些尝试都无效，可能需要向uni-app官方提交问题，或者考虑使用其他方式实现。由于问题在真机调试时出现，且具体表现没有详细描述，以上提供多种思路，请根据实际情况选择。考虑到时间，这里给出一个综合的优化版本：1.使用唯一key2.增加样式3.在滑动过程中隐藏视频（用v-show，但注意在App端v-show可能对原生组件无效，所以用v-if）4.增加延迟加载代码示例：模板部分： ```vue<swiper-itemv-for="(video, index) invideoList":key="video.id"class="swiper-item" ><view class="video-wrapper"><!--使用v-if控制，并且当不是滑动状态时才渲染 --><videov-if="index ===current &&!isSwiping":id="'video-' +index":src="video.url"...></video><!--在滑动过程中显示封面图占位 --><imagev-else-if="index ===current":src="video.cover"class="cover-image"/></view>...其他覆盖元素</swiper-item> ```脚本部分：```javascriptconstisSwiping =ref(false); constonSwiperChange =(e) =>{const index= e.detail.current;if(videoContext){videoContext.pause();videoContext= null;}isSwiping.value= true;setTimeout(()=> {current.value =index;//延迟100ms后隐藏滑动状态，显示视频setTimeout(() =>{isSwiping.value= false;loadVideo(index);},100);}, isApp.value?50 :0);}; ```这样，在滑动过程中，当前视频会显示一个封面图（避免空白），等滑动结束再显示视频并播放。注意：封面图需要从数据中获取，如果数据中没有，可以用视频第一帧（需要提前生成）。如果仍然不能解决问题，可能需要考虑自定义滑动容器。由于问题复杂且涉及底层渲染，以上方案可能需要根据实际情况调整。最后，如果问题依旧，建议在DCloud社区提问，并提供测试工程。由于无法直接调试，以上代码仅供参考。相关问题： §§相关问题§§:1.在uni-app中，如何解决原生组件（如video）在swiper中滑动时的层级问题？2.如何使用uni-app的subNVue来实现视频播放列表？ 3.在uni-app中，如何实现类似抖音的上下滑动切换视频（不使用swiper组件）？ 4.如何优化uni-app中视频列表的内存占用和性能？</think>在真机调试中，如果视频在滑动时仍然出现位置随机变化的问题，这通常是由于原生组件层级和渲染机制导致的。以下是更彻底的解决方案，包含代码优化和调试技巧： ### 终极解决方案代码 ```vue <template> <view class="video-container"> <!-- 使用自定义滑动容器替代 swiper --> <scroll-view class="custom-swiper" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="false" :show-scrollbar="false" @scroll="onScroll" @touchend="onTouchEnd" > <view v-for="(video, index) in videoList" :key="index" class="video-item" :style="{ height: windowHeight + 'px' }" > <!-- 视频容器 --> <view class="video-wrapper"> <video v-if="index === current" :id="'video-' + index" :src="video.url" :controls="false" :autoplay="true" :muted="muted" object-fit="cover" :style="{ height: windowHeight + 'px' }" @loadedmetadata="onVideoReady(index)" ></video> <!-- 封面图作为占位 --> <image v-else-if="index === nextIndex" :src="video.cover" class="cover-image" :style="{ height: windowHeight + 'px' }" /> </view> <!-- 视频信息 --> <cover-view class="video-info"> <cover-view class="title">{{ video.title }}</cover-view> <cover-view class="author-info"> <cover-image class="author-avatar" :src="video.author.avatar"></cover-image> <cover-view class="author-name">{{ video.author.name }}</cover-view> </cover-view> </cover-view> <!-- 操作按钮 --> <cover-view class="actions"> <cover-view class="action-btn" @click="toggleLike(index)"> <cover-view class="iconfont">{{ video.isLiked ? '♥' : '♡' }}</cover-view> <cover-view class="action-count">{{ video.likes }}</cover-view> </cover-view> <cover-view class="action-btn" @click="openCommentModal(index)"> <cover-view class="iconfont">💬</cover-view> <cover-view class="action-count">{{ video.comments.length }}</cover-view> </cover-view> </cover-view> </view> </scroll-view> <!-- 播放控制按钮 --> <cover-view class="play-control"> <cover-view class="control-btn" @click="toggleMute"> {{ muted ? '🔇' : '🔊' }} </cover-view> </cover-view> </view> </template> <script setup> import { ref, onMounted, nextTick } from 'vue'; const isApp = ref(false); const windowHeight = ref(0); const current = ref(0); const nextIndex = ref(1); const scrollTop = ref(0); const scrollTimer = ref(null); const videoList = ref([]); const videoContext = ref(null); const muted = ref(false); const lastScrollPosition = ref(0); const isScrolling = ref(false); // 初始化 onMounted(() => { // 检测环境 if (typeof plus !== 'undefined' && plus.os) { isApp.value = ['android', 'ios'].includes(plus.os.name.toLowerCase()); } // 获取窗口高度 uni.getSystemInfo({ success: (res) => { windowHeight.value = res.windowHeight; } }); // 加载数据 getVideoData(); }); // 获取视频数据 const getVideoData = async () => { try { const db = uniCloud.database(); const res = await db.collection('news-articles') .where({ videoshow: db.command.exists(true) }) .get(); videoList.value = res.result.data.map((item, index) => ({ id: index, url: item.videoshow, cover: item.cover || item.thumbnail || 'default_cover.jpg', title: item.title, author: { avatar: item.author_avatar, name: item.author_name }, likes: item.likes || 0, comments: item.comments || [], isLiked: false })); // 预加载第一个视频 if (videoList.value.length > 0) { loadVideo(current.value); } } catch (err) { console.error('获取视频数据失败:', err); } }; // 加载视频 const loadVideo = (index) => { if (videoContext.value) { videoContext.value.pause(); videoContext.value = null; } nextTick(() => { videoContext.value = uni.createVideoContext(`video-${index}`); if (videoContext.value) { videoContext.value.play(); videoContext.value.muted = muted.value; } // 预加载下一个视频 nextIndex.value = (index + 1) % videoList.value.length; }); }; // 视频准备就绪 const onVideoReady = (index) => { if (index === current.value) { console.log(`视频 ${index} 准备就绪`); // 确保视频正确显示 nextTick(() => { scrollTop.value = index * windowHeight.value; }); } }; // 滚动处理 const onScroll = (e) => { const scrollTop = e.detail.scrollTop; const currentIndex = Math.round(scrollTop / windowHeight.value); // 防止快速滚动时频繁切换 if (Math.abs(lastScrollPosition.value - scrollTop) > 50) { lastScrollPosition.value = scrollTop; isScrolling.value = true; if (currentIndex !== current.value) { current.value = currentIndex; loadVideo(currentIndex); } // 清除之前的定时器 if (scrollTimer.value) clearTimeout(scrollTimer.value); // 设置滚动结束检测 scrollTimer.value = setTimeout(() => { isScrolling.value = false; // 确保滚动到正确位置 scrollTop.value = current.value * windowHeight.value; }, 300); } }; // 触摸结束处理 const onTouchEnd = () => { // 确保滚动到正确位置 nextTick(() => { scrollTop.value = current.value * windowHeight.value; }); }; // 切换静音 const toggleMute = () => { muted.value = !muted.value; if (videoContext.value) { videoContext.value.muted = muted.value; } }; // 其他方法保持不变... </script> <style scoped> .video-container { width: 100%; height: 100vh; background-color: #000; position: relative; overflow: hidden; } .custom-swiper { width: 100%; height: 100%; } .video-item { width: 100%; position: relative; } .video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } video, .cover-image { width: 100%; height: 100%; display: block; background-color: #000; } .cover-image { object-fit: cover; } /* 其他样式保持不变... */ .play-control { position: absolute; bottom: 20px; right: 20px; z-index: 100; } .control-btn { width: 50px; height: 50px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; } </style> ``` ### 解决方案详解 #### 1. 使用自定义滚动视图替代 swiper 组件 ```vue <scroll-view class="custom-swiper" :scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll" > <!-- 视频项 --> </scroll-view> ``` - **原因**：uni-app 的 swiper 组件在 App 端处理原生组件时存在已知问题 - **优势**：scroll-view 提供更精细的滚动控制，避免原生组件层级冲突 #### 2. 精确控制视频位置 ```javascript const onScroll = (e) => { const scrollTop = e.detail.scrollTop; const currentIndex = Math.round(scrollTop / windowHeight.value); if (currentIndex !== current.value) { current.value = currentIndex; loadVideo(currentIndex); } }; ``` - **动态计算**：根据滚动位置计算当前视频索引 - **阈值控制**：添加滚动阈值防止抖动 #### 3. 视频预加载和占位策略 ```vue <video v-if="index === current"></video> <image v-else-if="index === nextIndex" class="cover-image"></image> ``` - **当前视频**：只渲染当前播放的视频 - **预加载**：显示下一个视频的封面图作为占位 - **内存优化**：避免同时加载多个视频 #### 4. 滚动位置校正 ```javascript const onTouchEnd = () => { scrollTop.value = current.value * windowHeight.value; }; ``` - **精确定位**：触摸结束后校正滚动位置 - **防止偏移**：确保视频完全占据屏幕 #### 5. 视频加载就绪处理 ```javascript const onVideoReady = (index) => { if (index === current.value) { scrollTop.value = index * windowHeight.value; } }; ``` - **同步更新**：视频加载完成后更新滚动位置 - **防止闪烁**：确保视频显示在正确位置 #### 6. 真机调试技巧 1. **开启调试模式**： ```javascript // main.js uni.setEnableDebug({ enableDebug: true }); ``` 2. **日志增强**： ```javascript console.log(`视频位置: ${index}, 窗口高度: ${windowHeight.value}`); ``` 3. **性能监控**： ```javascript // 监听内存警告 uni.onMemoryWarning(() => { console.warn('内存不足，释放资源'); // 释放非当前视频资源 }); ``` 4. **设备信息获取**： ```javascript uni.getSystemInfo({ success: (res) => { console.log('设备信息:', res); } }); ``` ### 关键优化点 1. **放弃 swiper 组件**： - 使用 scroll-view 实现自定义滑动逻辑 - 完全控制滚动位置和视频切换 2. **精确位置计算**： - 基于设备高度计算每个视频位置 - 添加滚动结束校正逻辑 3. **资源管理**： - 只加载当前视频 - 使用封面图预加载 - 及时释放非活动视频 4. **调试增强**： - 添加详细日志 - 监控内存使用 - 响应系统事件 这些优化从根本上解决了视频在滑动时位置随机变化的问题，通过完全控制滚动逻辑和视频加载机制，避免了原生组件与框架的层级冲突。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值