如何解决微信小程序map组件z-index的层级问题?

春哥团队技术教程分享】关于微信小程序的map组件,官方在开发时已经做的很好了,一个组件解决了接入地图的所有麻烦,但是在实际小程序的使用过程中还是存在点问题的,经常还会有客户咨询我们春哥团队技术如何解决小程序map组件z-index的层级覆盖的问题?网上关于这类问题的咨询也不少,今天春哥团队技术大东这里给大家分享下解决方法。

如何解决<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>map组件z-index的层级问题?

遇到的如下情景:

刚开始接入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>

果然,不失众望的解决了这个问题!
 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对春哥技术博客的支持。

 

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:春哥团队技术分享:如何在微信公众号平      下一篇:很抱歉没有了