微信小程序> 微信小程序避开组件cover-view的那些坑

微信小程序避开组件cover-view的那些坑

浏览量：11198 时间： 来源：微信小程序

最近在开发城市地铁图项目，具体功能有规划路线、定位最近地铁站、以及显示整个城市的地铁网状图等功能。根据需求，在实现的时候在地铁线路图上需要添加定位按钮及线路弹框来展示位置信息以及地铁站详情信息。

在地铁图调研初期，原计划实现渲染方案是采用svg来绘制，但是调研后发现微信小程序原生API不支持svg。同时，我们在开源中找到一个svg的框架库来实现绘制，但是开发初期发现遇到很多无法实现的需求和性能问题。在对开源库的代码跟踪后，发现绘制方案也是canvas的方式，于是我们决定使用原生canvas的方案来支持地铁图。但是呢，又遇到一些问题，那么我们来看看几个具体的点：        


1) view在canvas上无法正常显示。在canvas上使用view来添加图片和弹框时，发现图片以及弹框在canvas的下面，不能正常显示图片。

查看文档发现canvas、map、video等原生组件使用的是native实现的，默认显示在小程序的最上层，所以就把view换成cover-view或者cover-image。

使用view效果：


替换成cover-view效果：

但是使用cover-view又遇到了层级和样式的问题。

2）canvas上使用cover-image添加图片，图片设置position：absolute；页面上的图片显示在canvas画线的下方，导致定位按钮不能正常使用。后来把position该换成fixed解决来层级的问题。效果如下所示： 
.locationIcon { width: 3rem; height: 3rem; position: fixed; bottom: 3rem; left: 0.7rem;}


3）在页面上实现一个弹框时，根据UI图需要实现一个底边线和底边小三角形。通过border给块级元素设置底边线或者css实现三角箭头，单边border设置无效。最终采用了height为1px的cover-view或者图片来代替。

设置单边border效果： 

   设为起点cover-view> 设为终点cover-view> 站点详情cover-view> cover-view> cover-view>



修改后的代码： 

   设为起点cover-view> cover-view> 设为终点cover-view> cover-view> 站点详情cover-view> cover-view>  cover-image> cover-view> cover-view>

最终的效果：



踩坑总结：canvas层级较高，使用cover-view或者cover-image在canvas做操作。单边border相关的操作使用图片或者块级元素来代替。

查看相关API文档：

cover-view相关文档：
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

点击这里免费试用，快速创建您的专属小程序
标签： 微信小程序 小程序 小程序是什么

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

相关资讯

招商热线

17304402882

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎

深圳市咫尺网络科技开发有限公司©2015 咫尺网络 粤ICP备14097199号 工商网监电子标识