微信小程序在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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
JS实现滑动插件
Jan 15 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
计数器详细设计
2006/10/09 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
validform表单验证的实现方法
2019/03/08 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python文件及目录操作实例详解
2015/06/04 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python十进制转二进制的详解
2020/02/07 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
植树节活动总结
2014/04/30 职场文书
大学生工作自荐书
2014/06/16 职场文书
五一口号
2014/06/19 职场文书
企业读书活动总结
2014/06/30 职场文书
工作岗位职责范本
2015/02/15 职场文书
办公室禁烟通知
2015/04/23 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL