uniapp视频层级影响页面问题
需求：底部操作框在最高层级
问题：视频遮挡住了操作框
参考博客-video标签层级问题
官方文档说明
解决①：使用cover-view
参考文档-cover-view
1. 使用方式：在需要覆盖的video里面使用
// videoZindex1-coverView.vue页面
<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
style="width: 100%;position: relative;">
<cover-view class="cover-box">
<cover-view>覆盖的内容</cover-view>
</cover-view>
</video>
// 样式
<style lang="less" scoped>
.cover-box {
position: fixed;
bottom: 0;
width: 100%;
height: 120rpx;
background-color: yellow;
}
</style>
2. 最终效果
只能子绝父相覆盖视频，fixed固定定位仍然不能覆盖视频，不符合我的需求
解决②：使用plus.nativeObj.view
参考文档-原生控件-View
1. 使用方式
// videoZindex2-plus.vue页面
<script>
export default {
data() {
return {
optionView: null
}
},
onLoad() {
// 这里我的高度统一是120rpx，但是plus不能用rpx，所以需要算一下
let rpxUnit = 1
uni.getSystemInfo({
success: (info) => {
rpxUnit = info.screenWidth / 750
}
});
this.optionView = new plus.nativeObj.View("option-view", {
position: "dock",
dock: "bottom",
width: "100%",
height: `${rpxUnit*120}px`,
bottom: 0,
backgroundColor: "#fff",
}, [{
id: "rect-id",
tag: "rect",
color: "#f98d2b",
position: {
top: `${rpxUnit*20}px`,
bottom: `${rpxUnit*20}px`,
left: `${rpxUnit*225}px`,
right: `${rpxUnit*225}px`,
},
rectStyles: {
radius: `${rpxUnit*40}px`
}
}, {
id: 'font-id',
tag: 'font',
text: '操作',
position: {
top: `${rpxUnit*20}px`,
bottom: `${rpxUnit*20}px`,
left: `${rpxUnit*225}px`,
right: `${rpxUnit*225}px`,
},
textStyles: {
align: "center",
color: "#fff",
size: '18px'
}
}]);
this.optionView.show()
},
onUnload(){
this.optionView.close()
},
methods: {
}
}
</script>
2. 最终结果
- 层级最高，退出页面前需要关闭。
- 渲染到页面上的是一块画布，无法进行精准的按钮点击交互。
- 标签书写动态样式难度较大。
解决③：使用subNVue（最终采取）
参考文档-原生子窗体
参考文档-subNvue使用
1. 新建subNvue子窗体
2. 使用原生子窗体的pages.json配置
3. 使用subNvue子窗体
这里我需要一直显示，在页面加载的时候就显示，实际上这个子窗体可以在任何时机显示和隐藏。
onLoad() {
const subNvue = uni.getSubNVueById("bottom-fixed-operation-box")
subNvue.show("none", 0, () => {})
},
4. 书写subNvue子窗体
// operation.nvue子窗体页面
<template>
<view class="operation-box">
<button class="btn-self" @click="operationFun">
<text class="font-box">操作</text>
</button>
</view>
</template>
<script>
export default {
onLoad() {
uni.$on("back",(e)=>{
console.log("监听页面事件",e);
})
},
methods: {
operationFun(){
console.log("点击");
uni.$emit('bottom-fixed-operation-box',"参数")
}
}
}
</script>
<style scoped>
.operation-box {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 749rpx;
height: 119rpx;
background-color: #fff;
}
.btn-self {
width: 300rpx;
height: 80rpx;
background-color: #f98d2b;
border-radius: 50px;
margin: 0;
}
.font-box {
color: #fff;
font-size: 28rpx;
line-height: 80rpx;
}
</style>
// videoZindex3-subNvue.vue 使用子窗体的页面
<template>
<view style="padding: 0 50rpx;">
<view v-for="item in 10" :key="item" style="height: 100rpx;background-color: pink;">
其它内容
</view>
<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" style="width: 100%;"></video>
<view v-for="item in 5" :key="item" style="height: 100rpx;background-color: pink;">
其它内容
</view>
</view>
<!-- <view class="seat"> </view>
<view class="button-box">
<button class="btn-self">操作</button>
</view> -->
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
const subNvue = uni.getSubNVueById("bottom-fixed-operation-box")
subNvue.show("none", 0, () => {})
uni.$on("bottom-fixed-operation-box", (e) => {
console.log("参数",e);
this.operationFun()
})
},
mounted() {
uni.$emit("back","发送给子窗体的参数")
},
methods: {
operationFun() {
console.log("页面获取到了子窗体的点击事件，继续其它操作。");
}
}
}
</script>
<style lang="less" scoped>
.seat {
height: 120rpx;
}
.button-box {
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
width: 100%;
color: #666;
font-size: 28rpx;
background-color: #fff;
background-color: yellow;
padding: 20rpx 40rpx;
box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
z-index: 10;
.btn-self {
width: 40%;
height: 80rpx;
color: #fff;
font-size: 28rpx;
line-height: 80rpx;
background-color: #f98d2b;
border-radius: 50px;
margin: 0;
}
}
</style>
5. 子窗体通讯：全局自定义事件
可以在页面的vue文件发送事件，子窗口nvue文件监听；
也可以在子窗口nvue文件发送事件，页面vue文件监听
发送：
uni.$emit('bottom-fixed-operation-box',"参数")
接收：
uni.$on("bottom-fixed-operation-box", (e) => {
console.log("参数",e);
// 响应后的其它操作
})
6. 最终效果：底部操作层级比视频高，符合需求
文章来源：https://www.toymoban.com/news/detail-846861.html
7. 踩坑总结
- 在vue页面自定义监听事件需要在离开页面前移除，即
uni.$on("your-event")和uni.$off("your-event")需要搭配使用，否则再次进入页面时，触发事件时会多次执行$on里的操作。
// 举例：
uni.$on("bottom-fixed-operation-box", (e) => {
uni.navigateTo({
url: '/pages/...'
})
})
// 结果：多次进入页面时候触发此事件会进行多次页面跳转
- subNvue子窗体向vue页面传递数据异常
这里我的需求是动态显示一个或两个操作按钮，但是在onLoad()里的uni.$on似乎比其它代码都优先执行，uni.$off也不生效，重复进入页面仍会多次接收uni.$emit的触发事件，无法实现动态交互。
但是项目需要这个功能，没办法，调试两天无果后，只能写两个原生子窗口，动态决定显示哪个。
我的demo
demo的gitee地址文章来源地址https://www.toymoban.com/news/detail-846861.html
到了这里，关于uniapp视频层级问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
