Echarts圖表在移動端和小程式中影響頁面的滾動的解決辦法
Echats圖表在移動端顯示後,當手指在圖表區域內滑動,會影響頁面的滾動。h5頁面沒有親測,小程式頁面,經排查,是因為觸發了touchStart、touchMove和touchEnd方法。
一、h5頁面解決方法
1.如果可以的話,移動端建議使用highCharts代替echarts,感覺highcharts更適合移動端。
2.如果不需要與圖表進行互動,而只是純展示的時候,可以用一個透明的元素定位在echarts圖表的上方。這樣滑動的時候就不會觸發小程式的預設行為啦。
二、微信小程式解決方法
由於微信小程式中,echarts的層級最高,無論設定多大層級也無法遮住echarts。而且小程式中好像只能用echarts吧。所以為了解決這個bug,我只能委屈求全了。開啟ec-canvas.wxml檔案,將touchStart、touchMove和touchEnd去掉了,直接刪除就好啦。這三個事件應該是做縮放的吧,我們也沒有這個縮放的需求。所以就去掉了。雖然暫時滿足的需求,還是沒有真正的解決問題。如果有相同需求的小夥伴可以解解燃眉之急吧。
注: 如果哪位小夥伴有好的方法可以留言討論啊,虛心求教,什麼都阻擋不了我追求真理的心!
相關推薦
Echarts圖表在移動端和小程式中影響頁面的滾動的解決辦法
Echats圖表在移動端顯示後,當手指在圖表區域內滑動,會影響頁面的滾動。h5頁面沒有親測,小程式頁面,經排查,是因為觸發了touchStart、touchMove和touchEnd方法。 一、h5頁面解決方法 1.如果可以的話,移動端建議使用highCharts代替echarts,感覺
富文字在h5和小程式中的顯示
後臺傳來的資料有 content: "<p><img src="http://file.rzkeji.com/web/zhaowoa/upload/2018/11/29/95fb21bb1eab0266665b1c56969c74ea.png" title="15438
在React、Vue和小程式中使用函式節流和函式防抖
在上一篇中我總結了節流函式和防抖函式的基本原理:總結前端函式防抖與函式節流。 接下來介紹一下防抖函式和節流函式在前端框架中的使用。 在使用前一定要注意兩個問題: this的指向 事件物件的傳遞 React中使用防抖函式和節流函式 在React事件呼叫時,R
微信小程式中把頁面生成圖片
這個問題我上網搜了一下,答案有多種,但是真正能用的沒有幾何。很多答案都是雷同,有的網友也不負責任,直接拿來照抄,自己也不跑一遍看看。哎,不說了,說多了全是淚。希望我們的技術達人在分享的時候,能夠真實的走一遍程式碼,儘量能讓我等小白看的懂啊。鬧騷發過了,下面我們就進入正題吧(*^__^*) 嘻嘻……
移動端內容超出容器滑動會卡的解決辦法
brush 自動 color pre contain back 容器 ... ont 建議不采用flex布局,滑動會卡 直接采用最原始的: 1.在最外層給定一個width(height)值,固定容器的寬高,然後overflow:auto; 2.它裏
微信小程式之判斷頁面滾動方向
需求 微信小程式中如果判斷頁面滾動方向? 解決方案 1.用到微信小程式API 2.獲取頁面實際高度 <!--WXML--> <view id="box"> <view class="list" wx:for="{{List}}
移動端彈出層上禁止頁面滾動
再寫移動端的時候經常會需要自己寫一個彈框,但是彈框出現後會出現在彈框上還可以滾動整個頁面,試過將body的overflow設定為hidden,但是在蘋果手機跟一些安卓手機上無效,後來在網上看到一種直接用js 的方法,直接禁止滾動事件,很有效,程式碼如下,有需要的人可以拿去:
甘果移動老甘:移動網際網路變遷中的App和小程式
2018 年 10 月13 日,由又拍雲和知曉雲聯合主辦的 Open Talk 丨2018 小程式開發者沙龍系列活動廣州站拉開帷幕,甘果移動的 CEO 路文傑(老甘)在沙龍上做了《移動網際網路變遷中的 App和小程式》的分享。“2018 小程式開發者沙龍”是又拍雲 Open Talk 繼“2018 音視訊技術
微信小程式中使用ECharts實現報表圖表展示
getData() { wx.showLoading({ title: '載入中...', }); let that = this; util.request(傳送ajax請求).then(function (res) { if (res.errno === 0)
移動端和微信小程式對 iPhone X 適配
一、 安全區域(safe area) 與iPhone6/6s/7/8相比,iPhone X 無論是在螢幕尺寸、解析度、甚至是形狀上都發生了較大的改變,下面以iPhone 8作為參照物,先看看iPhone X尺寸上的變化: 蘋果對於 iPhone X 的設計佈
CSS - 移動端 常見小bug整理與解決方法總結【更新中】
mic ros class clas 問題 像素 css strong 常見問題 常見問題總結與整理系列~ 1. border一像素在手機上看著有點粗的問題: 原理是因為:1px在手機上是使用2dp進行渲染的 換成 border: 0.5像素?是不行的!
微信小程式中資料的儲存和獲取
/儲存資料 try { wx.setStorageSync('key',this.data.radioCheckVal2) //key表示data中的引數
微信小程式中使用Echarts(可非同步請求資料)
在微信小程式中使用Echarts,主要分為以下幾步: 1.首先要下載ecomfe/echarts-for-weixin專案,下載後將ec-canvas資料夾複製到小程式專案中,假設放在根目錄下utils資料夾中。 2.在要實現echarts圖的頁面引入echarts.js檔案,例如要在i
小程式中JSON檔案中全域性和子頁面的欄位window配置
相信有過實際小程式開發的人,都不陌生主程式app.json和子頁面的XX.json檔案中window欄位的配置。 如果全域性都是用app.json的一個樣式,那麼你就可以忽略掉此文。但是你想個性化單獨設定各個頁面的window欄位,那麼問題來了, 你會發現:嚴格按照小程式官方的window格式來設定,就是不
微信小程式中Echarts資料非同步更新
就是微信小程式中使用echarts-for-weixin 1.wx.request 首先講講wx.request的使用: wx.request({ url: 'test.php', //僅為示例,並非真實的介面地址 data: { x: '
微信小程式中使用scroll-view和onPullDownRefresh一起使用實現scroll-view的下拉重新整理的辦法
1.效果:boss要在同一個頁面當中,通過左右滑動呈現出不同資料,並且資料是以列表的形式展示,並且可以通過下拉重新整理.2.實現:左右滑動的功能可以通過swiper實現,並設定circular="{{true}}"每個頁面的list如果直接顯示在swiper-item裡面的話
微信小程式中wxml和wxss的樣式說明,徹底搞定佈局排版
對於css不熟悉的Android程式設計師來說,開發微信小程式面臨的一個比較困難的問題就是介面的排版了。微信小程式的排版就跟wxml和wxss有關了,它們兩者相當於android的佈局檔案,其中wxml指定了介面的框架結構,而wxss指定了介面的框架及元素的顯示樣式。 一、wxml
微信小程式中使用者登入和登入態維護
提供使用者登入以及維護使用者的登入狀態,是一個擁有使用者系統的軟體應用普遍需要做的事情。像微信這樣的一個社交平臺,如果做一個小程式應用,我們可能很少會去做一個完全脫離和捨棄連線使用者資訊的純工具軟體。讓使用者登入,標識使用者和獲取使用者資訊,以使用者為核心提供服務,是大部分小程式都會做的事情。我們今天就來了解
微信小程式中form 表單提交和取值例項詳解
我們知道,如果我們直接給 input 新增 bindinput,比如:<input bindinput="onUsernameInput" />,那麼可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e)
分享java程式設計中一個小程式:獲取當前系統日期和時間在小程式中顯示出來
特別注意月份是從0開始而不是從1開始,所以需要在月份上加1import java.applet.Applet; import java.awt.TextArea; import java.util.C