問題現(xiàn)象

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名與空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、定結(jié)網(wǎng)站維護、網(wǎng)站推廣。

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

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

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

如下圖：

追蹤問題原因

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

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

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

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

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

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

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

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

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

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

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

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

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

用cover-view來解決？

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

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

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

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

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

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

最終解決方案

對于這個問題，因為我這邊和echarts的交互比較少，所以我的解決方案就是在echarts渲染完畢后將它替換為一張圖片。

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

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

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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：微信小程序在ios下Echarts圖表不能滑動的問題解決-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://www.rwnh.cn/article34/cssgpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、云服務(wù)器、Google、品牌網(wǎng)站設(shè)計、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)