1. 程式人生 > >微信小程式map元件z-index的層級問題

微信小程式map元件z-index的層級問題

說起微信小程式的map元件,可以說是良心之作了,一個元件解決了所以接入地圖的所有麻煩,
但是在實際小程式的試用過程中還是存在點問題的。
如下情景:
剛開始接入map元件的時候是在微信開發工具的模擬器上預覽的,看起來沒有一點問題,如下圖:
模擬器預覽圖片,微信小程式map元件

但是在手機上真機模擬的時候就比較尷尬了,地圖擋住了我底部的按鈕,這個要怎麼辦呢?先是在百度上百度了好久,
別人家寫的部落格都說,小程式的map元件是層級最高的,這個沒辦法處理; 然後就覺得涼涼了,不知道要怎麼辦了,
難道要自己重新寫個地圖嗎?感覺又不太現實,於是就問了最近在寫小程式的幾個朋友,有的說沒寫過,
知道有個人說到cover-view這個檢視容器。官方給出的解釋是這樣子的:
cover-view
基礎庫 1.4.0 開始支援,低版本需做相容處理。

覆蓋在原生元件之上的文字檢視,可覆蓋的原生元件包括map、video、canvas、camera、live-player、live-pusher,只支援巢狀cover-view、cover-image,可在cover-view中使用button。

結果就懷著試試看的心情,試了一下這個cover-view,

<cover-view class='bottom-btn'>
        <cover-view class='bot-btn service'>
            <cover-view class='contact-btn' open-type='contact'>
                諮詢客服
            </cover-view>
        </cover-view>
        <cover-view class='bot-btn order' bindtap='toOrder'>
            立即預定
        </cover-view>
    </cover-view>

果然不失眾望的解決了這個問題,滿心歡喜啊!
微信圖片_20190104103626.jpg