echart x轴标签偏移_移动端H5页面滑动手势X轴实例

3af43eba5039d9fff74e87b3aa644203.png

话不多少,上代码。


let touchX = 0 // 默认初始值// 两行注释伪代码,绑定 touchstart 与 touchend 事件// dom.addEvenetListener('touchstart', touchStart)// dom.addEvenetListener('touchend', touchEnd)function touchStart(e) { // 手指触碰时候,重置 touchX 记录值 touchX = e.touches[0].clientX}function touchEnd(e) { // 松开手指时候,进行计算,这里设置偏移量大于 50 像素认为有意思切换,即 50 像素以内为误触 let offsetX = e.changedTouches[0].clientX - touchX if(offsetX < -50) swipeLeft() else if(offsetX > 50) swipeRight()}function swipeLeft() { console.log('手指左划,即页面内容向左滚动呈现右侧') }function swipeRight() { console.log('手指右划,即页面内容向右滚动呈现左侧') }

这点东西即可实现,无需代码库,若需要 Y 轴自行修改相应 X 为 Y 即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值