前言

说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的。

如下情景:

刚开始接入map组件的时候是在微信开发工具的模拟器上预览的,看起来没有一点问题,如下图:

关于微信小程序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>

果然不失众望的解决了这个问题,满心欢喜啊!

关于微信小程序map组件z-index的层级问题分析

总结

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

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。