使用cover-view解决微信小程序地图map等原生组件层级问题

2018-02-26 21:41 栏目:技术开发 查看(28189)

湖南幸运赛车爱彩人彩票网 www.schu9.cn 微信小程序的map、video、canvas、camera等组件都是原生组件,层级是最高的,并不能像原生开发那样使用z-index来控制层级。

解决方法可以采用切换隐藏等方式来做,然而地图组件如果采用这种方式来做就会变得不便。实际上从1.4.0基础库中增加了一个组件cover-view,用于在map、video、canvas、camera等原生组件上显示基础原生视图。在去年9月份的时候,这个问题还在微信官方团队在长沙的分享会上介绍到的,并以摩拜单车小程序举例。

252

具体可以参考官方文档关于cover-view介绍,同时还有一个“孪生”的组件,就是cover-image,用于在cover-view中显示图片。

如下图的小demo就是利用这些组件,其中地图上的四个??椋ㄋ阉骺?、定位按钮、切换按钮、个人中心入口)都是利用cover-view来构造的。

微信图片_20180225175405

需要注意的是,cover-view和cover-image这两个组件仅能够嵌套在map、video、canvas、camera等原生组件里面,虽然在1.9.0开始支持嵌套在view,但嵌套到view中不是它本身的意义了。

另外需要注意的是,这两个组件css不是支持所有的属性,只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow等。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:使用cover-view解决微信小程序地图map等原生组件层级问题 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 487| 755| 144| 454| 527| 111| 727| 694| 271| 964|