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

在微信小程序中,map组件导致底部按钮被遮挡。通过尝试和研究,发现使用cover-view视图容器可以解决这一问题。cover-view可以覆盖在map组件之上,允许在上面放置文本和按钮,提供了解决地图遮挡UI元素的有效方法。
摘要由CSDN通过智能技术生成

嗷呦呦 说起微信小程序的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'>

       

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值