微信小程序map、video、canvas地图组件添加覆盖物
程序员文章站
2024-02-12 22:46:22
...
微信小程序
在微信小程序中video、map、canvas等组件的层级都最高的
但是,同样的有一个视图容器可以覆盖在这些“*”组件之上的
Video
在video之上添加覆盖物
<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
enable-danmu danmu-btn controls>
<cover-view class="cover">这里是一个覆盖物</cover-view>
</video>
video{
width:100%;
height:500rpx;
}
.cover{
color:#fff;
background: #000;
}
效果图
Map
在Map地图组件之上添加一个“扫一扫”按钮
<map>
<cover-view class="cover">
<cover-view class="scan">扫一扫</cover-view>
</cover-view>
</map>
map {
width: 100%;
height: 500rpx;
}
.cover {
position: absolute;
bottom: 50rpx;
width: 100%;
display: flex;
justify-content: center;
}
.scan {
color: #fff;
background: #666;
width: 45%;
line-height: 1.5;
text-align: center;
border-radius: 20rpx;
}
效果图
Canvas
<canvas canvas-id="canvas">
<cover-view>这里是一个覆盖物</cover-view>
</canvas>
canvas {
width:100%;
height:500rpx;
}
cover-view{
position: absolute;
top:170rpx;
background: #000;
color:#fff;
}
效果图
上一篇: PHP小偷程序的设计与实现示例