微信小程序在ios下Echarts圖表不能滑動(dòng)的問題解決

問題現(xiàn)象

這個(gè)問題的現(xiàn)象說起來很簡單。

小程序頁面中有一篇很長的文章，內(nèi)部有一個(gè)Echarts圖表，手指上下滑動(dòng)觀看內(nèi)容。

但是手指滑動(dòng)區(qū)域在Echarts圖表上時(shí)，頁面卻不能滑動(dòng)了。

如下圖：

追蹤問題原因

因?yàn)樵谛〕绦蛏箱秩緢D表用到的是echarts-for-weixin這個(gè)組件,而這個(gè)組件確實(shí)不支持一些Echarts功能。

所以最開始我懷疑是這個(gè)組件的問題，認(rèn)為它把我的滑動(dòng)事件給吞了。

為了確認(rèn)這個(gè)問題，我直接在這個(gè)組件ec-canvas旁加了個(gè)兄弟節(jié)點(diǎn)view，然后用絕對(duì)定位將其覆蓋在ec-canvas，這樣滑動(dòng)的時(shí)候就會(huì)滑動(dòng)到我的view上而不是ec-canvas。

但是結(jié)果在ios下，還是不能滑動(dòng)。

于是我給這個(gè)view的加了個(gè)背景色，在ios下的真機(jī)調(diào)試時(shí)發(fā)現(xiàn)，ec-canvas組件還是在view上面。

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

這個(gè)ec-canvas組件是如此出眾，無論什么都遮蓋不了它的風(fēng)采。

而導(dǎo)致它如此出眾的原因就是：圖表是一個(gè)canvas組件，而小程序中canvas是一個(gè)原生組件。

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

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

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

讓我們看看關(guān)鍵的地方：

也就是說canvas這類原生組件就是比view這種非原生的組件層級(jí)高。

用cover-view來解決？

為了解決原生組件層級(jí)最高的限制。小程序?qū)ｉT提供了 cover-view 和 cover-image 組件，可以覆蓋在部分原生組件上面。這兩個(gè)組件也是原生組件。

我將原來的兄弟view組件替換為了cover-view組件，然后希望達(dá)到可以滑動(dòng)的效果。

雖然此時(shí)cover-view組件已經(jīng)可以覆蓋在canvas上了，但是依然不能滑動(dòng)。

關(guān)于這個(gè)問題，我們可以認(rèn)為小程序的所有組件都是放在webview中，而原生組件在webview中用的是占位符。

在滾動(dòng)時(shí)，獲取原生組件占位符的位置，再改變原生組件的位置。（如果仔細(xì)觀察，會(huì)發(fā)現(xiàn)這些原生組件有時(shí)會(huì)產(chǎn)生一些奇怪的抖動(dòng)，這一點(diǎn)可以佐證這個(gè)論點(diǎn)。）

所以ios下，我們手指在canvas和cover-view這類原生組件上滑動(dòng)時(shí)，事件是不會(huì)傳導(dǎo)到webview上的，頁面也就不會(huì)滑動(dòng)。

最終解決方案

對(duì)于這個(gè)問題，因?yàn)槲疫@邊和echarts的交互比較少，所以我的解決方案就是在echarts渲染完畢后將它替換為一張圖片。

如果我更新了數(shù)據(jù)，那么就重新放出echarts，等它渲染完畢后，再次替換為一張圖片。

由于公司代碼不適合放出，所以我搞了個(gè)簡易版的代碼放在這里。

wxml文件關(guān)鍵代碼：

<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文件關(guān)鍵代碼：

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('轉(zhuǎn)換圖片失敗', res)
 });
 })
 chart.setOption(option);
 return chart;
 },

 echartInit(e) {
 this.initChart(e.detail.canvas, e.detail.width, e.detail.height);
 }
});

總結(jié)

總的來說，解決起來還算簡單。

但是對(duì)于和Echarts有很多交互的場景，這個(gè)方案就未必那么好實(shí)現(xiàn)了。

從這個(gè)問題入手，我對(duì)微信小程序原生組件的玩法有了更多的認(rèn)識(shí)。

更深入一點(diǎn)的認(rèn)識(shí)就是，微信小程序當(dāng)下對(duì)原生組件的這種處理更像是在一件普通的布衣上貼上貂皮補(bǔ)丁。

雖然考慮到了原生組件所帶來的性能優(yōu)勢，但是同樣也會(huì)引發(fā)大量的問題，對(duì)于這件衣服的整體表現(xiàn)而言這些貂皮補(bǔ)丁恐怕并不見得是件好事。

希望以后小程序能從根本上解決這種問題吧。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。