微信小程序解决了ios下echart图表无法滑动的问题

问题现象

这个问题的现象很简单。

小程序页面有一篇长文，里面有一个e-echart图表，手指上下滑动观看内容。

但是当手指滑动区域在echart图表上时，页面无法滑动。

下图：

跟踪问题的原因

因为echart-for-weixin的组件是用来在小程序中渲染图表的，而且这个组件不支持一些echart功能。

所以一开始我怀疑是这个组件的问题，以为它吞噬了我的滑动事件。

为了确认这个问题，我直接在这个组件ec-canvas旁边添加了一个兄弟节点视图，然后用绝对定位的方式覆盖在ec-canvas上，这样滑动的时候就会滑到我的视图而不是ec-canvas。

但在ios下，成绩还是不能下滑。

所以我给这个视图添加了背景色。在ios下调试真机时，发现ec-canvas组件还在视图上。

无论是增加视图上的z索引值还是将绝对值更改为固定值，ec-canvas组件呈现的图形都在视图上，但不会被视图遮挡。

这种ec-canvas组件非常出色，没有什么能掩盖它的优雅。

之所以如此突出，是因为图表是一个画布组件，而小程序中的画布是一个原生组件。

接下来，让我们看看在小程序中使用本机组件的局限性。

对使用小程序本机组件的限制

首先，在这里附上一个链接：对使用小程序原生组件的限制。

让我们看看关键点：

也就是说，画布等原生组件高于视图等非原生组件。

用封面-视图解决？

为了解决本机程序集级别的最高限制。小程序特别提供了封面视图和封面图片组件，可以覆盖一些原生组件。这两个组件也是本机组件。

我把原来的兄弟视图组件换成了封面视图组件，然后希望达到滑动的效果。

此时，虽然cover-view组件可以覆盖在画布上，但它仍然无法滑动。

在这个问题上，我们可以认为小程序的所有组件都放在webview中，而本机组件在webview中使用占位符。

滚动时，获取本机组件占位符的位置，然后更改本机组件的位置。(如果你仔细观察，你会发现这些原生组件有时会产生一些奇怪的抖动，这可以支持这个论点。)

因此，在ios中，当我们的手指在画布和cover-view等原生组件上滑动时，事件不会传输到webview，页面也不会滑动。

最终解决

对于这个问题，我的解决方案是渲染后用图片替换echart，因为echart和我之间的交互很少。

如果更新数据，我会重新发布echarts，渲染后用图片替换。

因为公司代码不适合发布，所以我做了一个简单版本的代码放在这里。

Wxml文件密钥代码：

view class=' echart-container ' image wx : if=' { { echartImgSrc！==' ' } ' src=' http : { { echartigsrc } } ' class=' echart-img '/image EC-canvas wx : if=' { { echartigsrc====' ' } } Id=' my chart-DOM-pie ' canvas-Id=' my chart-pie ' EC=' { { EC } } ' bind : init=' echartignit '/EC-canvas/view js文件密钥代码：

page({ data : { EC : } }，echartImgSrc: ' ' }，initChart(canvas，width，height){ const chart=echart . init(canvas，null，{ width: width，height : height })；canvas.setChart(图表)；var选项={ //.};chart.on('finished '，()={this。select component(' # my chart-DOM-pie ')。canvastotemfilepath({ success 3360 RES={ this。setdata ({echartimgsrc:res。tempfilepath})}，fail3360res=console.log('转换图片失败。}) chart.setOption(选项)；返回图表；}，echartInit(e){ this . initchart(e . detail . canvas，e.detail.width，e . detail . height)；}});摘要

总的来说，解决办法相当简单。

然而，对于与e-echart有许多交互的场景，这个方案可能不太容易实现。

从这个问题开始，我对如何玩微信小程序的原生组件有了更好的理解。

更深一层的理解是，微信小程序对原生组件的处理更像是在普通布料上贴上水貂贴片。

虽然考虑到原生组件带来的性能优势，也会造成很多问题。恐怕这些貂皮的补丁对于这件衣服的整体表现来说并不一定是好事。

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。