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

2024-06-13 02:58:31

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

解决方案：

1.添加遮罩层。

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

遇到的问题：

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'
/>

再添加了遮罩层之后，在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，可以使用image的bindload来控制。

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,},
}

如果你想开发小程序或者app的话，可以通过第三方专业开发平台，来帮助你实现开发需求：厦门在乎科技-专注厦门小程序开发公司、app开发、网站开发

微信小程序iOS系统上echarts不能滑动的问题相关推荐

微信小程序IOS IphoneX上边框显示不全
今天调试页面微信开发工具上看没有任何问题,安卓疯7的真机也没问题到了疯X上出了问题如下图如图显示不全看了代码设置如下各种摸不到头脑 ---------------------------- ...
微信小程序ios系统下viedo视频全屏无法遮挡fixed事件的解决办法
之前博主遇到过一个巨巨巨大的坑,困扰了我很久都没有找到原因,其实现在我也没有找到具体的原因,如果有同学知道的话可以给我留言哦,先po一下具体遇到的bug 当进入全屏的时候,底部fixed固定的tab栏 ...
视频教程-雪狐CentOS7云服务器部署微信小程序商城系统(宝塔面板)-微信开发
雪狐CentOS7云服务器部署微信小程序商城系统(宝塔面板) 1.多年开发和授课经验. 2.精通PHP.前端.Android.iOS等开发技术. 3.希望能将自己所学教给学生. 刘安良 ¥12.00 ...
ios 上传图片失败小程序_微信小程序ios端使用ajaxSubmit上传图片失败，android没问题...
微信小程序ios端使用ajaxSubmit上传图片失败,android没问题微信小程序开发上传图片,使用ajaxsubmit,post请求,form设置multipart/form-data, a ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
【附源码】Java计算机毕业设计基于微信小程序停车系统（程序+LW+部署）
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
ssm基于微信小程序的恋上诗词设计与实现毕业设计源码011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...

最新文章

热门文章