微信小程序 Echarts图表无法在ios下滑动

问题现象

这个问题的现象很简单。

在小程序页面中有一篇很长的文章，里面有一个Echarts图表，手指上下滑动以查看内容。

但是当手指滑动区域位于Echarts图表上时，页面无法滑动。

如下图所示：

追踪问题原因

因为echarts-for-weixin组件用于在小程序上呈现图表，所以此组件不支持某些Echarts函数。

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

为了确认这个问题，我将一个兄弟节点视图直接添加到这个组件ec-canvas，然后用带有绝对定位的ec-canvas覆盖它，这样在滑动时，它将滑动到我的视图而不是ec-canvas。

但结果仍然没有在ios下滑动。

所以我在这个视图中添加了一个背景颜色，在ios下的真机调试中找到，ec-canvas组件仍然在视图中。

无论是增加视图上的z-index值，还是将绝对值更改为固定，无论如何，ec-canvas组件呈现的图表位于视图上方，但不会被视图遮挡。

这款ec-canvas组件非常出色，无法涵盖其风格。

使其如此出色的原因是图表是画布组件，小程序中的画布是本机组件。

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

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

首先是链接：小程序本机组件使用限制。

让我们来看看关键点：

也就是说，诸如canvas之类的本机组件高于非本机组件级别的视图。

用cover-view来解决？

解决最高级别的本机组件层次结构。 小程序提供了覆盖视图和封面图像组件，可以覆盖在某些本机组件上。这两个组件也是本机组件。

我用封面视图组件替换了原始的兄弟视图组件，然后想要实现可滑动的效果。

虽然此时封面视图组件已经可以覆盖在画布上，但它仍然无法滑动。

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

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

因此，在ios下，当我们的手指在画布和封面视图等本机组件上滑动时，事件不会传输到webview，并且页面不会滑动。

最终解决方案

对于这个问题，因为我与echarts的交互较少，我的解决方案是在呈现echarts后用图像替换它。

如果我更新数据，我将重新发布echarts并等待渲染，然后用地图替换它

片。

由于公司代码不适合发布，我在这里放了一个简单版本的代码。

Wxml文件密钥代码：

Js文件密钥代码：

Page({ 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 setChart(chart); var option={ //. }; chart.on('finished', ()=> { this.selectComponent('#mychart-dom-pie').canvasToTempFilePath({ success: res=> { this.setData({ echartImgSrc: res.tempFilePath }) }, fail: res=> console.log('convert picture failed', res) }); }) chart.setOption(option); return chart ; }, echartInit(e) { this.initChart(e.detail.canvas, e.detail.width, e.detail.height); }});

总结

In general, the solution is fairly simple.

xx 但对于与Echarts有很多交互的场景，这个解决方案不一定那么好。

从这个问题开始，我对微信小程序原生组件的游戏玩法有了更多的了解。

更深入的理解是微信小程序目前对原生组件的处理更像是普通布料上的补丁。

虽然考虑到本机组件的性能优势，但它也会导致很多问题。对于这件连衣裙的整体表现，这些绒面革补丁可能不是一件好事。

我希望小程序将来能够从根本上解决这个问题。