默认分类

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

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

  1. admin admin
    Chrome 68 7

    确实很有用,我也遇到过这样的问题,看了这个博客搞好的,大神!∠( ᐛ 」∠)_

  2. 小宝宝 小宝宝
    QQ 6 O

    解决了我遇到的类似问题.666

  3. 小时刻 小时刻
    Chrome 71 10

    小程序这个东西说向html又不像html,哈哈

    1. admin admin
      Chrome 68 7

      跟HTML差别可大了

This is just a placeholder img.