微信小程序在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 aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
JS如何判断json是否为空
Jul 06 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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
php 动态执行带有参数的类方法
2009/04/10 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
php适配器模式简单应用示例
2019/10/23 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
javascript实现画板功能
2020/04/12 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
python实现用户答题功能
2018/01/17 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python简单区块链模拟详解
2019/07/03 Python
Python实现图像的垂直投影示例
2020/01/17 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
python合并多个excel文件的示例
2020/09/23 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Linux机考试题
2015/07/17 面试题
Java基础类库面试题
2013/09/04 面试题
销售顾问的岗位职责
2013/11/13 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
python中 Flask Web 表单的使用方法
2022/05/20 Python