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

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

微信小程序map组件z-index的层级问题的更多相关文章

  1. 微信小程序----map组件实现检索【定位位置】周边的POI

    效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...

  2. 微信小程序~map组件z-index无效

    因项目需要,以map为背景,上面悬浮有其他组件.微信开发者工具测试时一切正常,但是真机测试时地图组件却把所有的组件覆盖,检查z-index设置,一切正常,地图组件层级也在这些组件的下面,为什么会被覆盖 ...

  3. 微信小程序Map组件踩坑日记

    刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应 ...

  4. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  5. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  6. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  7. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  8. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

  9. Wuss Weapp 微信小程序 UI 组件库

    微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...

随机推荐

  1. React学习(2)——action,reducer

    action creator 是一个函数,格式如下: var actionCreator = function() { // 构建一个 action 并返回它 return { type: 'AN_A ...

  2. win7(64bit)使用mingw64配置gtkmm

    因为linux命令不熟悉,加上时间不充裕,仍然决定在win7_64bit下开发GUI程序,选择gtkmm是因为: 1. 在图形界面程序中,windows系统当之无愧GUI之王,用户友好性其他OS无法替 ...

  3. iOS 往来--书面资料

    写接触知识和查询功能的基础,现在我们就来看看信息写入 新 变化 删除 #pragma mark - 系人信息 //创建联系人 - (void) creatNewRecord { CFErrorRef ...

  4. 用curl访问HTTPS站点并登录(对HTTP返回的结果特别清楚)

    开发网站,少不了测试.现在的网站为了加强安全性,都启用了HTTPS协议.所谓HTTPS,也就是HTTP文本在SSL协议中传输.用curl命令行来测试HTTPS站点是个很有用的功能,写点脚本,就可以做功 ...

  5. asp .net 页面跳转

    ajax异步 通过ajax去请求数据,然后在js里面得到返回结果,赋值location.href <div> <input id="url" /> < ...

  6. Bootstrap 反色导航条

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  7. GIS基础软件及操作(十二)

    原文 GIS基础软件及操作(十二) 练习十二. ArcMap制图-地图版面设计 设置地图符号-各种渲染方式的使用 使用ArcMap Layout(布局)界面制作专题地图 将各种地图元素添加到地图版面中 ...

  8. 零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

    原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend ...

  9. CRS-2800: Cannot start resource 'ora.asm' as it is already in the INTERMEDIATE state on server ‘RAC02’

    在安装ORACLE RAC的Grid Infrastructure时,在节点1运行/u01/app/11.2.0/grid/root.sh正常,当在节点2运行/u01/app/11.2.0/grid/ ...

  10. WD-线程KTHREAD结构(WRK)

    线程是系统处理器调度的基本单元,而且线程调度是在内核层完成的,所以,KTHREAD 的许多域都跟Windows 的线程调度机制有关. 找到进程的线程可以使用!process 1 2 3 kd> ...