微信小程序在ios下Echarts圖表不能滑動的解決方案

問題現象

這個問題的現象提及來很簡單。

小程序頁面中有一篇很長的文章，內部有一個Echarts圖表，手指上下滑動觀看內容。

可是手指滑動區域在Echarts圖表上時，頁面卻不能滑動了。

以下圖：

追蹤問題緣由

由於在小程序上渲染圖表用到的是echarts-for-weixin這個組件,而這個組件確實不支持一些Echarts功能。

因此最開始我懷疑是這個組件的問題，認爲它把個人滑動事件給吞了。

爲了確認這個問題，我直接在這個組件ec-canvas旁加了個兄弟節點view，而後用絕對定位將其覆蓋在ec-canvas，這樣滑動的時候就會滑動到個人view上而不是ec-canvas。

可是結果在ios下，仍是不能滑動。

因而我給這個view的加了個背景色，在ios下的真機調試時發現，ec-canvas組件仍是在view上面。

不管是加大view上的z-index值，仍是將absolute改成fixed，反正ec-canvas組件所渲染的圖表就是在view上面，而沒有被view遮擋。

這個ec-canvas組件是如此出衆，不管什麼都遮蓋不了它的風采。

而致使它如此出衆的緣由就是：圖表是一個canvas組件，而小程序中canvas是一個原生組件。

接下來就讓咱們看看小程序中使用原生組件的限制。

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

這裏先附上連接：小程序原生組件使用限制。

讓咱們看看關鍵的地方：

也就是說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有不少交互的場景，這個方案就未必那麼好實現了。

從這個問題入手，我對微信小程序原生組件的玩法有了更多的認識。

更深刻一點的認識就是，微信小程序當下對原生組件的這種處理更像是在一件普通的布衣上貼上貂皮補丁。

雖然考慮到了原生組件所帶來的性能優點，可是一樣也會引起大量的問題，對於這件衣服的總體表現而言這些貂皮補丁恐怕並不見得是件好事。

但願之後小程序能從根本上解決這種問題吧。

原文出處：https://www.cnblogs.com/vvjiang/p/11161103.html