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

在uni-app项目中,当页面包含u-charts图表时,遇到图表区域阻碍页面滑动的问题。文章介绍了两种解决方案:1) 使用u-charts2.0的`disableScroll`属性控制图表滑动;2) 自定义事件监听touchstart/touchmove/touchend,通过父组件控制页面滚动,并解决了由于触摸点不准导致的页面抖动问题。
摘要由CSDN通过智能技术生成

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

以下有两种方法

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

1.第一种方法

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

2.第二种方法

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

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

小编按照这个思路实现了页面移动,但是又发现一个问题,就是手机是电容屏,手触摸的点获取不会很准确,就导致明明是向上移动,但是实时监听到移动的的数据会有负数&

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值