問題現(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，然后用絕對定位將其覆蓋在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這種非原生的組件層級高。

用cover-view來解決？

為了解決原生組件層級最高的限制。小程序?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)。

最終解決方案

對于這個(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é)

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

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

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。