微信小程序之(zhī)cover-view - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序之(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

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

.wxss

  1. .place_info {
  2. position: relative;
  3. width: 90%;
  4. margin-left: 20rpx;
  5. margin-top: 10rpx;
  6. border-radius: 5rpx;
  7. background: white;
  8. padding: 10rpx;
  9. }
  10. .place_info_parking{
  11. font-size: 50rpx
  12. }
  13. .place_info_surplus{
  14. color: #999999
  15. }
  16. .place_info_order{
  17. margin-top: 10rpx;
  18. margin-bottom: 10rpx;
  19. margin-left: 20rpx;
  20. background-color: #ff5722;
  21. color: #FFFFFF;
  22. padding: 10rpx;
  23. width: 90%;
  24. border-radius: 5rpx;
  25. text-align: center;
  26. }

效果圖

map上(shàng)添加view


相關案例查看更多