ant-design-mobile-Tabs纵向滑动触发切换tab问题解决方式
发布日期:2021-05-20 10:07:08
浏览次数:34
分类:技术文章
本文共 1144 字,大约阅读时间需要 3 分钟。
1、issues
在使用这个组件的时候同样遇到了这个问题,也就是纵向滑动的时候会触发到tab切换事件
,研究过许多办法,都没有解决,最终决定将原有组件的滑动去掉,自己去实现一个滑动切换tab
效果。 2、
给相应的标签注册Touch事件
,通过触摸事件开始、移动、结束可以自己控制左右滑动间距,去减少上下滑动所带来的误触。
onTouchStart = e => { this.startX = e.touches[0].clientX; }; onTouchMove = e => { this.endX = e.touches[0].clientX; }; onTouchEnd = () => { const { isCreateShow } = this.state; if (!isCreateShow) { return; } // 获取滑动范围 if (this.startX > -1 && this.endX > -1) { const distance = Math.abs(this.startX - this.endX); if (distance > 120) { const { initialPage } = this.state; if (this.startX > this.endX) { if (initialPage !== 3) { const newPage = initialPage + 1; this.setState({ initialPage: newPage, }); this.handleTabChange('', newPage); } } else if (initialPage !== 0) { const newPage = initialPage - 1; this.setState({ initialPage: newPage, }); this.handleTabChange('', newPage); } } } this.startX = -1; this.endX = -1; };
转载地址:https://blog.csdn.net/weixin_45416217/article/details/115478752 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年03月22日 21时54分37秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
数据库索引
2019-04-26
HDU4986 Little Pony and Alohomora Part I
2019-04-26
二分图匹配
2019-04-26
二分图匹配练习题
2019-04-26
链式前向星
2019-04-26
HDU4990 Reading comprehension
2019-04-26
指针数组和数组指针
2019-04-26
dijkstra求次短路径
2019-04-26
欧几里德与拓展欧几里德定理
2019-04-26
poj2115C Looooops 拓展欧几里德
2019-04-26
除法取模和逆元
2019-04-26
HDU5019Revenge of GCD
2019-04-26
中国剩余定理
2019-04-26
组合数取模
2019-04-26
线段树模板
2019-04-26
poj3264 Balanced Lineup——线段树
2019-04-26
RMQ算法
2019-04-26
树状数组
2019-04-26
度度熊与邪恶大魔王——dp
2019-04-26
ubuntu修改.bashrc文件
2019-04-26