- 具体问题：拓展组件uni-popup无法正常覆盖video组件
- 问题描述：在APP端，如果页面中使用了video组件，则拓展组件uni-popup（里面包括一个view组件，view下是个image组件）不能正常覆盖原生组件video。
示例：主要有一个video原生组件、一个image原生组件和一个uni-popup拓展组件
<template>
<view>
<view class="flex-sub margin-right-xs" style="height: 95%;">
<video style="width: 100%;height: 100%;" id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4" controls></video>
</view>
<view class="flex-sub margin-right-xs" style="align-self: center;" @tap="showBigImage">
<image style="width: 150upx;height: 150upx;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
</view>
<uni-popup class="uni-bg-white" :show="type === 'middle'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
<view class="uni-bg-white" style="width:500upx;height:300upx;">
<image style="width: 100%;height: 100%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
var _self;
export default {
components: {
uniPopup,
},
data() {
return {
type:"",
}
},
methods: {
showBigImage:function(){
_self.type = "middle";
},
togglePopup(type) {
_self.type = type;
}
},
onLoad:function(){
_self = this;
}
}
</script>
<style>
.cover-img{
position: fixed;
z-index: 999;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10upx;
padding: 30upx;
}
</style>
h5端可正常覆盖：
h5端可正常覆盖.png
app端不能正常覆盖：
app端不能正常覆盖.png
- 分析：
<video/>组件在非H5端是客户端创建的原生组件，它的层级是最高的，高于普通前端组件，不能通过 z-index 控制层级。可使用 cover-view或cover-image覆盖在上面，也可通过plus.nativeObj.view或原生子窗体subNVue等方式来实现。
- App端
cover-view、cover-image中不支持嵌套其它组件。 - App端暂不支持
cover-view、cover-image组件之间的嵌套。 - App端cover-view可覆盖的原生组件有限制，目前仅包括：
video、map - App端还可以使用更强大的plus.nativeObj.view绘制原生内容，参考:uni-app中使用5+界面控件、plus.nativeObj.view规范
- App端还提供了更灵活和强大的
subNvue，比cover-view和plus.nativeObj.view都更强大，参考原生子窗体subNvue - 其他小程序平台下，可以使用条件编译，完全按照其规范开发。
- 在 video 组件中使用时，不支持在全屏模式下使用
cover-view。 - 支付宝小程序中
cover-view不支持嵌套。
拓展：微信基础库 2.4.0 起已支持 video 组件的同层渲染，也就是video在非全屏时，可以被前端元素通过调节z-index来遮挡，但video全屏时，仍需要cover-view覆盖。
(1) 使用cover-image替代uni-popup：一方面程序报错，一方面也不符合操作需求，弃用
<cover-image class="cover-img" style="width:500upx;height:300upx;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></cover-image>
cover-image在app端报错.png
(2) 使用plus.nativeObj.view：虽然更灵活，但易用性比较差、没有动画、不支持内部内容滚动
(3) 原生子窗体subNvue
说明：subNVues 是 vue 页面的原生子窗体。用于解决 vue 页面中的层级覆盖和原生界面灵活自定义用的。它不是全屏页面，也不是组件，就是一个原生子窗体。它是一个 nvue 页面，使用 weex 引擎渲染，提供了比 cover-view、plus.nativeObj.view 更强大的原生排版能力，方便自定义原生导航或覆盖原生地图、视频等。
注意：原生子窗体subNvue替代了原生增强提示框插件，避免原生插件麻烦的打包流程。
- pages.json
,{
"path" : "pages/ipms/miaoyou/home/home",
"style" : {
"app-plus": {
"titleNView": false, //不启用系统导航
"subNVues":[{
"id": "popup", // 唯一标识
"path": "pages/ipms/miaoyou/home/subNVue/popup", // 页面路径
"type": "popup", //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
"style": {
"margin": "auto",
"width": "50%",
"height": "400upx"
}
}]
}
}
}
- home.vue 部分代码
<template>
<view class="uni-flex uni-row" style="width: 100%;height: 100%;">
<view style="width: 50%;height: 98%;">
<video style="width: 100%;height: 100%;" id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4" controls></video>
</view>
<view style="width: 50%;height: 98%;" @tap="showBigImage">
<image style="width: 100%;height: 100%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
</view>
<uni-popup class="uni-bg-white" :show="type === 'middle'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
<view class="uni-bg-white" style="width:500upx;height:300upx;">
<image style="width: 100%;height: 100%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
var _self;
export default {
components: {
uniPopup,
},
data() {
return {
type:"",
}
},
methods: {
showBigImage:function(){
// #ifdef H5
_self.type = "middle";
// #endif
// #ifdef APP-PLUS
_self.showPopup();
// #endif
},
showPopup() {
uni.$emit('page-popup', {// 向 popup 传递消息
imageUl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
videoUrl:'http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4'
});
const subNVue = uni.getSubNVueById('popup');// 通过 id 获取 nvue 子窗体
subNVue.show('slide-in-top', 250);// 打开 nvue 子窗体
},
togglePopup(type) {
_self.type = type;
}
},
onLoad:function(){
_self = this;
}
}
</script>
<style>
.cover-img{
position: fixed;
z-index: 999;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10upx;
padding: 30upx;
}
</style>
- popup.nvue
<template>
<div style="text-align: center;vertical-align: middle;">
<image style="vertical-align: middle;" :src="imageUl" mode="aspectFit"></image>
<!-- <video style="vertical-align: middle;" :src="videoUrl" controls></video> -->
</div>
</template>
<script>
export default {
data() {
return {
imageUl: '',
videoUrl:''
}
},
created() {
const vm = this;
uni.$on('page-popup', (data) => {
vm.imageUl = data.imageUl;
vm.videoUrl = data.videoUrl;
})
},
beforeDestroy() {
uni.$off('page-popup')
},
}
</script>
<style>
</style>
可能遇到的问题：
- 获取到原生子窗体实例为null：查看id是否匹配正确
-
实例方法未定义：编译模式查看是否为自定义编译模式
app端最终效果.png
参考原生组件说明
