微信小程序在ios下Echarts图表不能滑动的问题解决


Posted in Javascript onJuly 10, 2019

问题现象

这个问题的现象说起来很简单。

小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容。

但是手指滑动区域在Echarts图表上时,页面却不能滑动了。

如下图:

微信小程序在ios下Echarts图表不能滑动的问题解决

追踪问题原因

因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能。

所以最开始我怀疑是这个组件的问题,认为它把我的滑动事件给吞了。

为了确认这个问题,我直接在这个组件ec-canvas旁加了个兄弟节点view,然后用绝对定位将其覆盖在ec-canvas,这样滑动的时候就会滑动到我的view上而不是ec-canvas。

微信小程序在ios下Echarts图表不能滑动的问题解决

但是结果在ios下,还是不能滑动。

于是我给这个view的加了个背景色,在ios下的真机调试时发现,ec-canvas组件还是在view上面。

不论是加大view上的z-index值,还是将absolute改为fixed,反正ec-canvas组件所渲染的图表就是在view上面,而没有被view遮挡。

这个ec-canvas组件是如此出众,无论什么都遮盖不了它的风采。

而导致它如此出众的原因就是:图表是一个canvas组件,而小程序中canvas是一个原生组件。

接下来就让我们看看小程序中使用原生组件的限制。

小程序的原生组件使用限制

这里先附上链接:小程序原生组件使用限制。

让我们看看关键的地方:

微信小程序在ios下Echarts图表不能滑动的问题解决

也就是说canvas这类原生组件就是比view这种非原生的组件层级高。

用cover-view来解决?

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件。

我将原来的兄弟view组件替换为了cover-view组件,然后希望达到可以滑动的效果。

虽然此时cover-view组件已经可以覆盖在canvas上了,但是依然不能滑动。

关于这个问题,我们可以认为小程序的所有组件都是放在webview中,而原生组件在webview中用的是占位符。

在滚动时,获取原生组件占位符的位置,再改变原生组件的位置。(如果仔细观察,会发现这些原生组件有时会产生一些奇怪的抖动,这一点可以佐证这个论点。)

所以ios下,我们手指在canvas和cover-view这类原生组件上滑动时,事件是不会传导到webview上的,页面也就不会滑动。

最终解决方案

对于这个问题,因为我这边和echarts的交互比较少,所以我的解决方案就是在echarts渲染完毕后将它替换为一张图片。

如果我更新了数据,那么就重新放出echarts,等它渲染完毕后,再次替换为一张图片。

由于公司代码不适合放出,所以我搞了个简易版的代码放在这里。

wxml文件关键代码:

<view class="echart-container">
 <image wx:if="{{echartImgSrc!==''}}" src="{{echartImgSrc}}" class='echart-img'></image>
 <ec-canvas wx:if="{{echartImgSrc===''}}" id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>
</view>

js文件关键代码:

Page({
 data: {
 ec: {
 },
 echartImgSrc: ''
 },
 initChart(canvas, width, height) {
 const chart = echarts.init(canvas, null, {
 width: width,
 height: height
 });
 canvas.setChart(chart);

 var option = {
 // ...
 };
 chart.on('finished', () => {
 this.selectComponent('#mychart-dom-pie').canvasToTempFilePath({
 success: res => {
  this.setData({
  echartImgSrc: res.tempFilePath
  })
 },
 fail: res => console.log('转换图片失败', res)
 });
 })
 chart.setOption(option);
 return chart;
 },

 echartInit(e) {
 this.initChart(e.detail.canvas, e.detail.width, e.detail.height);
 }
});

总结

总的来说,解决起来还算简单。

但是对于和Echarts有很多交互的场景,这个方案就未必那么好实现了。

从这个问题入手,我对微信小程序原生组件的玩法有了更多的认识。

更深入一点的认识就是,微信小程序当下对原生组件的这种处理更像是在一件普通的布衣上贴上貂皮补丁。

虽然考虑到了原生组件所带来的性能优势,但是同样也会引发大量的问题,对于这件衣服的整体表现而言这些貂皮补丁恐怕并不见得是件好事。

希望以后小程序能从根本上解决这种问题吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
9个JavaScript日常开发小技巧
Oct 06 Javascript
Vue事件修饰符native、self示例详解
Jul 09 #Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 #Javascript
微信小程序wx.request拦截器使用详解
Jul 09 #Javascript
javascript实现图片轮播代码
Jul 09 #Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 #Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 #Javascript
Vue 实现前端权限控制的示例代码
Jul 09 #Javascript
You might like
escape unescape的php下的实现方法
2007/04/27 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python引用模块和查找模块路径
2016/03/17 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python入门之基础语法学习笔记
2020/02/08 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
明星邀请函
2015/02/02 职场文书
单位收入证明范本
2015/06/18 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python