關(guān)于微信小程序map組件z-index的層級問題分析

更新時間：2019年07月09日 15:26:34 作者：夜微微微的涼

這篇文章主要給大家介紹了關(guān)于微信小程序map組件z-index的層級問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

說起微信小程序的map組件，可以說是良心之作了，一個組件解決了所以接入地圖的所有麻煩，但是在實(shí)際小程序的試用過程中還是存在點(diǎn)問題的。

如下情景：

剛開始接入map組件的時候是在微信開發(fā)工具的模擬器上預(yù)覽的，看起來沒有一點(diǎn)問題，如下圖：

但是在手機(jī)上真機(jī)模擬的時候就比較尷尬了，地圖擋住了我底部的按鈕，這個要怎么辦呢？先是在百度上百度了好久，別人家寫的博客都說，小程序的map組件是層級最高的,這個沒辦法處理; 然后就覺得涼涼了，不知道要怎么辦了，難道要自己重新寫個地圖嗎？感覺又不太現(xiàn)實(shí)，于是就問了最近在寫小程序的幾個朋友，有的說沒寫過，知道有個人說到cover-view這個視圖容器。官方給出的解釋是這樣子的：

cover-view

基礎(chǔ)庫 1.4.0 開始支持，低版本需做兼容處理。

覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。

結(jié)果就懷著試試看的心情，試了一下這個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'>
   立即預(yù)定
  </cover-view>
 </cover-view>

果然不失眾望的解決了這個問題，滿心歡喜啊！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

詳釋JavaScript執(zhí)行環(huán)境與執(zhí)行棧
一句話就可以概括：代碼 ( 包括函數(shù) ) 執(zhí)行時所需要的所有信息就是執(zhí)行環(huán)境。由于 ES 歷經(jīng)多個版本，所以執(zhí)行環(huán)境的標(biāo)準(zhǔn)也一直在變。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
微信小程序canvas.drawImage完全顯示圖片問題的解決
這篇文章主要介紹了微信小程序canvas.drawImage完全顯示圖片問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
javascript十個最常用的自定義函數(shù)(中文版)
如果不使用類庫或者沒有自己的類庫，儲備一些常用函數(shù)總是有好處的。
2009-09-09
微信小程序獲取手機(jī)系統(tǒng)信息的方法【附源碼下載】
這篇文章主要介紹了微信小程序獲取手機(jī)系統(tǒng)信息的方法,涉及微信小程序wx.getSystemInfo函數(shù)的簡單使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
document.getElementById為空或不是對象的解決方法
document.getElementById為空或不是對象的解決方法，一般情況下注意先內(nèi)容后js.
2010-01-01
使用JavaScript計算當(dāng)前時間前N個工作日的方法技巧
在Web開發(fā)中,處理日期和時間是常見的需求之一,特別是在金融、人力資源等領(lǐng)域,經(jīng)常需要計算特定的日期范圍或工作日,本文將深入探討如何使用JavaScript計算當(dāng)前時間前N個工作日,并提供詳細(xì)的代碼示例和實(shí)際開發(fā)中的技巧,需要的朋友可以參考下
2025-02-02
Javascript同時聲明一連串（多個）變量的方法
這篇文章主要給大家介紹了利用Javascript聲明一連串（也就是多個）變量的方法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
JavaScript實(shí)現(xiàn)加密與解密詳解
這篇文章介紹了JavaScript實(shí)現(xiàn)加密與解密詳解的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
利用Node.js創(chuàng)建一個密碼生成器的全步驟
這篇文章主要給大家介紹了關(guān)于如何利用Node.js創(chuàng)建一個密碼生成器的相關(guān)資料,文章將實(shí)現(xiàn)的步驟一步步介紹的非常詳細(xì),對大家具有也一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2021-07-07