微信小程序在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字典探测用户名工具
Oct 05 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 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
php合并数组中相同元素的方法
2014/11/13 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python无序链表删除重复项的方法
2020/01/17 Python
flask项目集成swagger的方法
2020/12/09 Python
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
精彩的英文自荐信
2014/01/30 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
让生命充满爱观后感
2015/06/08 职场文书
奔腾年代观后感
2015/06/09 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL