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

来源:csdn博客分类: 文章浏览史发布时间:2020-08-29 16:32:08 最后更新:2020-08-29 浏览:863

转载声明：

本文为摘录自“csdn博客”，版权归原作者所有。

原文链接:

https://blog.csdn.net/KascLiyuan/article/details/793909...

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-08-29 16:32:08

微信小程序

在微信小程序中video、map、canvas等组件的层级都最高的
map组件

但是，同样的有一个视图容器可以覆盖在这些“顶级”组件之上的

这里写图片描述

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;
}

效果图

video上添加覆盖物

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;
}

效果图

这里写图片描述