欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-12 22:46:22
...

微信小程序

在微信小程序中video、map、canvas等组件的层级都最高的 
微信小程序map、video、canvas地图组件添加覆盖物

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

微信小程序map、video、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、video、canvas地图组件添加覆盖物



 

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

效果图

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



 

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

效果图

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