微信小程序之(zhī)cover-view

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：105

前言

最近公司有個(gè)項目需要(yào / yāo)用到(dào)小程序的(de)map組件，要(yào / yāo)實現一個(gè)類似摩拜紅包車的(de)信息彈框,簡單說(shuō)就(jiù)是(shì)在(zài)map組件上(shàng)添加自定義view。
摩拜紅包車

直接在(zài)map上(shàng)使用view，image等是(shì)不(bù)行的(de)，因爲(wéi / wèi)查看微信小程序API底部Bug&Tip有一句話，map 組件是(shì)由客戶端創建的(de)原生組件，它的(de)層級是(shì)最高的(de)。所以(yǐ)直接在(zài)map上(shàng)使用view等沒有效果的(de)，即使使用z-index改變z軸也(yě)是(shì)沒用的(de)，網上(shàng)也(yě)查了(le／liǎo)很多，都說(shuō)是(shì)沒辦法使用這(zhè)種布局的(de)。
後來(lái)仔細查看微信小程序API文檔，發現一個(gè)控件cover-view,沒錯，就(jiù)是(shì)今天的(de)主角。查看文檔第一行發現有這(zhè)麽一句話，覆蓋在(zài)原生組件之(zhī)上(shàng)的(de)文本視圖，可覆蓋的(de)原生組件包括map、video、canvas、camera，隻支持嵌套cover-view、cover-image。有了(le／liǎo)這(zhè)句話我就(jiù)心安了(le／liǎo)，看來(lái)是(shì)可以(yǐ)實現了(le／liǎo)。

代碼實現

.wxml

  <map id="map" longitude="{{point.longitude}}" latitude="{{point.latitude}}" 
markers="{{markers}}" scale="{{mapScale}}" show-location  bindregionchange="regionchange" 
 bindmarkertap="markertap" controls="{{controls}}" bindcontroltap="controltap" 
style="width: {{mapWidth}}; height: {{mapHeight}};top: {{mapTop}}"> 
<cover-view class="place_info">
<cover-view class="place_info_parking">cover-view</cover-view>
<cover-view class="place_info_surplus">可覆蓋在(zài)原生組件的(de)組件</cover-view>
<cover-view class="place_info_order">66666</cover-view>
</cover-view>
</map>

.wxss

  .place_info {
position: relative;
width: 90%;
margin-left: 20rpx; 
margin-top: 10rpx; 
border-radius: 5rpx;
background: white;
padding: 10rpx;
}
.place_info_parking{
 font-size: 50rpx
}
.place_info_surplus{
  color: #999999
}
.place_info_order{
  margin-top: 10rpx;
margin-bottom: 10rpx; 
margin-left: 20rpx;   
background-color: #ff5722;
color: #FFFFFF;
padding: 10rpx;
width: 90%;
border-radius: 5rpx;
text-align: center;
}