微信小程序map、video、canvas地图组件添加覆盖物

微信小程序

在微信小程序中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;
}

效果图