解决微信小程序在iOS 系统上echarts不能滑动的问题

目录
文章目录隐藏
  1. 解决方案

微信小程序中使用echarts插件的时候,遇到了一个问题:当系统是iOS时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显。作为一个微信小程序的新手开发,这个问题属实难倒我了。

解决方案

1.添加遮罩层

使用一个遮罩层覆盖echarts图表,这样的话,当长按并滑动页面的时候,滑动的就是这个遮罩层了,自然就可以解决问题。

遇到的问题:

  1. canvas是原生组件,层级很高,view无法作为遮罩层。我使用的是cover-view作为遮罩层。
    <cover-view wx:if="{{isIOS}}" class="echart-mask" ></cover-view>
    <e-chart  
         chart-class='echart'
         option='{{ data.getEChartOption(employeeInfoList) }}' 
         bindinstance='getEchartInstance'
    />
  2. 再添加了遮罩层之后,在iOS系统上可以正常滑动,但是在Android系统上又无法滑动了(真是风水轮流转 ̄へ ̄)。我是在页面上对系统进行判断,以决定是否创建遮罩层。
    wx.getSystemInfo({
      success: (result) =>this.setData({ isIOS: result.system.match(/iOS/) }),
    });

2. 将图表转为图片展示

因为echarts图标在我这只是进行数据展示,而不会与用户进行交互,所以也考虑到了在 echarts 的过渡动画走完之后,用图片来代替echarts组件。

getEchartInstance({
    detail: echart
}) {
    echart.on('finished', () = >{
        echart.getDom().saveAsImage().then((path) = >{
            this.setData({
                homeworkCountEchartImg: path
            });
        });
    });
},

遇到的问题:

在图片替换echarts的时候,出现了一次闪烁。要注意在图片加载完毕之后再移除echarts,可以使用imagebindload来控制。

3. 使用echart插件的disableTouch属性。

option对象的根目录,添加disableTouch属性,设为 true 即可。这是微信echarts插件官方技术人员给出的一种解决方案。

var eChartOption = {
    disableTouch: true, //解决 ios 系统,echarts 长按不能滑动的问题
    color: [
        '#79db66',
        '#769efd',
        '#f6994f',
        '#f5df4e',
        '#a668f5',
        '#66cbdb',
        '#dc76fd',
        '#6062e0',
        '#ec7997',
        '#88e6be',
    ],
    legend: {
        selectedMode: false,
        show: false,
    },
}

以上就是解决微信小程序在 iOS 系统上 echarts 不能滑动的问题方法,希望对需要的小伙伴有帮助。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 解决微信小程序在iOS 系统上echarts不能滑动的问题

发表回复