微信小程序之(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;
}
效果圖
map上(shàng)添加view