uni-app中内嵌u-charts图标导致页面在图表无法滑动

uni-app中内嵌u-charts图标导致页面在图表无法滑动

以下有两种方法

这个问题是在我现在的开发项目中发现的,由于之前图表页面是单个页面写的,不存在内容过多需要滑动,这次页面做调整把所有图表集成在一个页面里面,这次就发现,当滑动触摸在图表上整个页面是无法进行滑动的,那如何解决这个问题呢?

1.第一种方法

uni-app中内嵌u-charts图标导致页面在图表无法滑动
在u-charts2.0版本上有个disableScroll属性这个可以控制是否在图标滑动控制页面滚动,具体相关配置方式可以在链接: link 中查看。
当你把版本升级到2.0后你会发现你已经写好的图表组件会报错,那是因为1.0升级到2.0后相关用法会有变化,所以要改很多东西,十分麻烦,这是本公司大神又给小编说了第二种方法。

2.第二种方法

版本1.0插件中有自己的component组件,这个组件有监听touchstart/touchmove和touchend三个事件,我现在思路就是的就是能不能把这个事件传出来,让我们在父组件可以监听这个事件,然后让父组件页面强制滚动。

具体滚动的距离计算就是: 获取触摸开始Y坐标 实时获取触摸移动Y坐标 然后用两个相减就是触摸让页面移动的距离。

小编按照这个思路实现了页面移动,但是又发现一个问题,就是手机是电容屏,手触摸的点获取不会很准确,就导致明明是向上移动,但是实时监听到移动的的数据会有负数,这就导致页面在移动过程中会有抖动的现象出现,最后我们思考过后是移动的距离我们每隔几个取一次,过滤调不准确的数据,然后再滚动,这样就不会抖动了,话不多说,上代码
u-charts插件中 component.vue文件中:
uni-app中内嵌u-charts图标导致页面在图表无法滑动
在鼠标触摸的事件中设置自定义事件,传送给父组件。
uni-app中内嵌u-charts图标导致页面在图表无法滑动
父组件接收子组件事件 container是父组件的最外层大盒子class类。
uni-app中内嵌u-charts图标导致页面在图表无法滑动
父组件中接收到事件执行的代码:
uni-app中内嵌u-charts图标导致页面在图表无法滑动

上一篇:Helm charts


下一篇:学习Qt Charts - Qt Charts的坐标轴