微信小程序自定义模态框滚动禁止且可以在video组件上方

wxml内容:

< video id= "myVideo" class= 'demo' page-gesture= "true" src= "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
controls= "true" objectFit= "fill">
</ video >
< text class= 'demotext'>
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
这是一段话\n\n
</ text >
<!--遮罩 -->
< view class= 't-modal' catchtouchmove= "preventTouchMove"></ view >
< cover-view class= 't-zhezhao demotext'>这是遮罩的内容哦 </ cover-view >

wxss内容如下:

.demo{
width: 100%;
height: 375 rpx;
}
.t-modal{
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.t-zhezhao{
position: fixed;
z-index: 101;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba( 51, 51, 51, 0.5 );
}
/*下方样式设置字体,可不要,按自己的布局来 */
.demotext{
font-size: 28 rpx;
color: #fff;
}
然后你可以扫码在手机上测试效果是ok的,开发工具里面是可以上下滑动的这个不用管,只说明开发工具待优化

猜你喜欢

转载自blog.csdn.net/c5211314963/article/details/80283618