微信小程序video组件层级

1,598 阅读1分钟

主要解决video组件层侧过高,上滑时覆盖住顶部固定定位的导航

wxml

<video style="width: 100%;height=400px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"binderror="videoErrorCallback" duration="304" controls="true" autoplay="true" loop='true' show-fullscreen-btn="true" direction="0" vslide-gesture-in-fullscreen="true" muted="true" show-mute-btn="true" bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd' bindtap="btnclick"></video> <cover-view class='po'>导航栏固定定位</cover-view><view class='box'></view>

wxss

.box{  width: 100%;  height: 4000rpx;  background-color: coral;}cover-view {display:block;line-height:1.2;overflow:hidden;white-space:nowrap;pointer-events:auto; }.po{  width: 100%;  height: 100rpx;  position: fixed;  top: 0;  right: 0;  text-align: center;  line-height: 100rpx;  z-index: 9999;}.poo{   width: 100%;  height: 100rpx;}video{  margin-top: 100rpx;}