- 具體問題：拓展組件uni-popup無法正常覆蓋video組件
- 問題描述：在APP端蜜笤，如果頁(yè)面中使用了video組件美尸，則拓展組件uni-popup（里面包括一個(gè)view組件壹店，view下是個(gè)image組件）不能正常覆蓋原生組件video。
示例：主要有一個(gè)video原生組件鳖昌、一個(gè)image原生組件和一個(gè)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端是客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的低飒，高于普通前端組件许昨，不能通過 z-index 控制層級(jí)∪焐蓿可使用 cover-view或cover-image覆蓋在上面车要，也可通過plus.nativeObj.view或原生子窗體subNVue等方式來實(shí)現(xiàn)。
- App端
cover-view崭倘、cover-image中不支持嵌套其它組件翼岁。 - App端暫不支持
cover-view类垫、cover-image組件之間的嵌套。 - App端cover-view可覆蓋的原生組件有限制琅坡，目前僅包括：
video悉患、map - App端還可以使用更強(qiáng)大的plus.nativeObj.view繪制原生內(nèi)容，參考:uni-app中使用5+界面控件榆俺、plus.nativeObj.view規(guī)范
- App端還提供了更靈活和強(qiáng)大的
subNvue售躁，比cover-view和plus.nativeObj.view都更強(qiáng)大，參考原生子窗體subNvue - 其他小程序平臺(tái)下茴晋，可以使用條件編譯陪捷，完全按照其規(guī)范開發(fā)。
- 在 video 組件中使用時(shí)诺擅，不支持在全屏模式下使用
cover-view市袖。 - 支付寶小程序中
cover-view不支持嵌套。
拓展：微信基礎(chǔ)庫(kù) 2.4.0 起已支持 video 組件的同層渲染烁涌，也就是video在非全屏?xí)r苍碟，可以被前端元素通過調(diào)節(jié)z-index來遮擋，但video全屏?xí)r撮执，仍需要cover-view覆蓋微峰。
(1) 使用cover-image替代uni-popup：一方面程序報(bào)錯(cuò)，一方面也不符合操作需求抒钱，棄用
<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端報(bào)錯(cuò).png
(2) 使用plus.nativeObj.view：雖然更靈活蜓肆，但易用性比較差、沒有動(dòng)畫谋币、不支持內(nèi)部?jī)?nèi)容滾動(dòng)
(3) 原生子窗體subNvue
說明：subNVues 是 vue 頁(yè)面的原生子窗體仗扬。用于解決 vue 頁(yè)面中的層級(jí)覆蓋和原生界面靈活自定義用的。它不是全屏頁(yè)面瑞信，也不是組件，就是一個(gè)原生子窗體穴豫。它是一個(gè) nvue 頁(yè)面凡简，使用 weex 引擎渲染，提供了比 cover-view精肃、plus.nativeObj.view 更強(qiáng)大的原生排版能力秤涩，方便自定義原生導(dǎo)航或覆蓋原生地圖、視頻等司抱。
注意：原生子窗體subNvue替代了原生增強(qiáng)提示框插件筐眷，避免原生插件麻煩的打包流程。
- pages.json
,{
"path" : "pages/ipms/miaoyou/home/home",
"style" : {
"app-plus": {
"titleNView": false, //不啟用系統(tǒng)導(dǎo)航
"subNVues":[{
"id": "popup", // 唯一標(biāo)識(shí)
"path": "pages/ipms/miaoyou/home/subNVue/popup", // 頁(yè)面路徑
"type": "popup", //原生子窗口內(nèi)置樣式习柠，可取值：'popup',彈出層匀谣；"navigationBar",導(dǎo)航欄
"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>
可能遇到的問題：
- 獲取到原生子窗體實(shí)例為null：查看id是否匹配正確
-
實(shí)例方法未定義：編譯模式查看是否為自定義編譯模式
app端最終效果.png
參考原生組件說明
