手把手教你避开组件cover-view的那些坑
腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单、快速的构建小程序,是您实现地图功能的最佳伙伴。目前微信小程序插件提供路线规划、地铁图、地图选点等服务,欢迎大家体验!
我们将陆续推出更多功能的插件,敬请期待!以下内容转载自微信开放社区腾讯位置服务官方文章《手把手教你避开组件cover-view的那些坑》
作者:腾讯位置服务
链接: https://developers.weixin.qq.com/community/develop/article/doc/00008a2e7b4270d8dad857b8f5b813
来源:微信开放社区
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
案例背景:
最近在开发城市地铁图项目,具体功能有规划路线、定位最近地铁站、以及显示整个城市的地铁网状图等功能。根据需求,在实现的时候在地铁线路图上需要添加定位按钮及线路弹框来展示位置信息以及地铁站详情信息。
遇到的问题:
在地铁图调研初期,原计划实现渲染方案是采用svg来绘制,但是调研后发现小程序原生API不支持svg。同时,我们在开源中找到一个svg的框架库来实现绘制,但是开发初期发现遇到很多无法实现的需求和性能问题。在对开源库的代码跟踪后,发现绘制方案也是canvas的方式,于是我们决定使用原生canvas的方案来支持地铁图。但是呢,又遇到一些问题,那么我们来看看几个具体的点:
1) view在canvas上无法正常显示。
在canvas上使用view来添加图片和弹框时,发现图片以及弹框在canvas的下面,不能正常显示图片。
查看文档发现canvas、map、video等原生组件使用的是native实现的,默认显示在小程序的最上层,所以就把view换成cover-view或者cover-image。
使用view效果:
<!-- 线路 -->
<view class = "sublines sublines-icon">
<image class = 'sublinesIcon' src = "/static/img/ic_sublines.png" bindtap = 'clickSublines' wx-if = "{{lineIconShow}}" ></ image >
</view>
替换成cover-view效果:
<!-- 线路 -->
<cover-view class = "sublines sublines-icon">
<cover-image class = 'sublinesIcon' src = "/static/img/ic_sublines.png" bindtap = 'clickSublines' wx-if ="{{lineIconShow}}"></cover-image>
</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 class = "sdMark" style = 'top:{{tapClient.y}}px;left:{{tapClient.x}}px;' wx-if = "{{sdMarkShow}}">
<cover-view class = 'sdMarkContent'>
<cover-view class = 'sdMarkItem' bindtap = 'clickStart'>设为起点</cover-view>
<cover-view class = 'sdMarkItem' bindtap = 'clickEnd' >设为终点</cover-view>
<cover-view class = 'sdMarkItem' bindtap = 'clickStationDetail'>站点详情</cover-view>
</cover-view>
</cover-view>
修改后的代码:
<!-- 起终点设置弹框 -->
<cover-view class = "sdMark" style = 'top:{{tapClient.y}}px;left:{{tapClient.x}}px;' wx-if = "{{sdMarkShow}}">
<cover-view class = 'sdMarkContent'>
<cover-view class = 'sdMarkItem' bindtap = 'clickStart'>设为起点</cover-view>
<cover-view class = 'line'></cover-view>
<cover-view class = 'sdMarkItem' bindtap = 'clickEnd'>设为终点</cover-view>
<cover-view class = 'line'></cover-view>
<cover-view class = 'sdMarkItem' bindtap``= 'clickStationDetail'>站点详情</cover-view>
</cover-view>
<cover-view class = "icon">
<cover-image class = 'icArrow' src = '/static/img/ic_arrow.png'></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
欢迎体验和吐槽:"腾讯位置服务-地铁图"插件:
https://lbs.qq.com/miniprogram_plugin/subway.html
最新文章
- redis的主从复制配置
- 分析app和wap手机网站的不同
- 设置Tomcat编码
- php面试题之一——PHP核心技术(高级部分)
- MVC RenderSection
- query插件之ajaxForm ajaxSubmit的理解用法
- php 删除文件夹及文件
- 分享一个自己写的基于TP的关系模型(三)
- 如何唯一确定一台iOS设备
- 四、WCF的配置文件
- Linux用户管理的复习时间
- java.net.UnknownHostException
- Java 中Log4j的使用详情
- IPython绘图和可视化---matplotlib
- 【Java编译】含package的类文件编译
- 使用K-S检验一个数列是否服从正态分布、两个数列是否服从相同的分布
- xml 转map dom4j
- Composer 安装时要求输入授权用户名密码
- spring mvc requestmapping 配置多个
- SPOJ - DQUERY
热门文章
- Android 项目优化(四):内存优化
- 【红宝书】第20章.JSON
- Leetcode题解 - 双指针求n数之和
- 对《Java核心技术卷一》读者的一些建议
- Dynamics 365 Customer Engagement V9.X新引入的自动编号属性介绍
- [转]UiPath Studio Community如何连接orchestrator (Level2讲解)
- 前端开发规范:3-CSS
- apache commons lang架包介绍
- 数据库迁移导致Unknown character set: &#39;GBK&#39; 应用异常
- 列表list常用的方法