search

ZhongAnTech / zarm

基于 React 的移动端 UI 组件库
https://zarm.design
MIT License
1.71k stars 225 forks source link

fix：修复Carousel组件部分IOS设备下无法滑动的问题 #1123

Closed nuonuonuonuoyan closed 1 year ago

nuonuonuonuoyan commented 1 year ago

问题：在部分IOS设备上，当Carousel组件在页面加载时未出现在可视区域内时，滑动无效 分析：useDrag函数方法返回了onTouchStart函数，并绑定到了div容器上；经过实测，部分IOS设备无法触发onTouchStart事件，导致绑定的事件失效，从而无法触发useDrag函数，导致滑动逻辑无法进行； 解决：通过addEventListner监听touchstart事件，可以让元素触发onTouchStart事件。

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
zarm ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 16, 2023 4:13am
github-actions[bot] commented 1 year ago

⚡️ Deploying PR Preview...

nuonuonuonuoyan commented 1 year ago

打包过程报错了，看看怎么回事

Yang03 commented 1 year ago

问题：在部分IOS设备上，当Carousel组件在页面加载时未出现在可视区域内时，滑动无效 分析：useDrag函数方法返回了onTouchStart函数，并绑定到了div容器上；经过实测，部分IOS设备无法触发onTouchStart事件，导致绑定的事件失效，从而无法触发useDrag函数，导致滑动逻辑无法进行； 解决：通过addEventListner监听touchstart事件，可以让元素触发onTouchStart事件。

我们的官方demo ，也会出现这个问题吗

nuonuonuonuoyan commented 1 year ago

问题：在部分IOS设备上，当Carousel组件在页面加载时未出现在可视区域内时，滑动无效 分析：useDrag函数方法返回了onTouchStart函数，并绑定到了div容器上；经过实测，部分IOS设备无法触发onTouchStart事件，导致绑定的事件失效，从而无法触发useDrag函数，导致滑动逻辑无法进行； 解决：通过addEventListner监听touchstart事件，可以让元素触发onTouchStart事件。

我们的官方demo ，也会出现这个问题吗

官方demo复现不出来，因为效果展示的部分是在一个高度固定的容器内部展示的；复现过程需要单独起一个demo页，将页面拉长，Carousel放到页面最底部即可

nuonuonuonuoyan commented 1 year ago

问题：在部分IOS设备上，当Carousel组件在页面加载时未出现在可视区域内时，滑动无效 分析：useDrag函数方法返回了onTouchStart函数，并绑定到了div容器上；经过实测，部分IOS设备无法触发onTouchStart事件，导致绑定的事件失效，从而无法触发useDrag函数，导致滑动逻辑无法进行； 解决：通过addEventListner监听touchstart事件，可以让元素触发onTouchStart事件。

我们的官方demo ，也会出现这个问题吗

官方demo复现不出来，因为效果展示的部分是在一个高度固定的容器内部展示的；复现过程需要单独起一个demo页，将页面拉长，Carousel放到页面最底部即可

具体可以看我提的issue，不过Image部分的代码被解析成功了图片，我改下格式

nuonuonuonuoyan commented 1 year ago

问题：在部分IOS设备上，当Carousel组件在页面加载时未出现在可视区域内时，滑动无效 分析：useDrag函数方法返回了onTouchStart函数，并绑定到了div容器上；经过实测，部分IOS设备无法触发onTouchStart事件，导致绑定的事件失效，从而无法触发useDrag函数，导致滑动逻辑无法进行； 解决：通过addEventListner监听touchstart事件，可以让元素触发onTouchStart事件。

我们的官方demo ，也会出现这个问题吗

官方demo复现不出来，因为效果展示的部分是在一个高度固定的容器内部展示的；复现过程需要单独起一个demo页，将页面拉长，Carousel放到页面最底部即可

具体可以看我提的issue，不过Image部分的代码被解析成功了图片，我改下格式

https://github.com/ZhongAnTech/zarm/issues/1121#issuecomment-1594431353

Yang03 commented 1 year ago

问题：在部分IOS设备上，当Carousel组件在页面加载时未出现在可视区域内时，滑动无效 分析：useDrag函数方法返回了onTouchStart函数，并绑定到了div容器上；经过实测，部分IOS设备无法触发onTouchStart事件，导致绑定的事件失效，从而无法触发useDrag函数，导致滑动逻辑无法进行； 解决：通过addEventListner监听touchstart事件，可以让元素触发onTouchStart事件。

我们的官方demo ，也会出现这个问题吗

官方demo复现不出来，因为效果展示的部分是在一个高度固定的容器内部展示的；复现过程需要单独起一个demo页，将页面拉长，Carousel放到页面最底部即可

官方demo, 一屏也展示不出来，最底下那个有问题吗

nuonuonuonuoyan commented 1 year ago

问题：在部分IOS设备上，当Carousel组件在页面加载时未出现在可视区域内时，滑动无效 分析：useDrag函数方法返回了onTouchStart函数，并绑定到了div容器上；经过实测，部分IOS设备无法触发onTouchStart事件，导致绑定的事件失效，从而无法触发useDrag函数，导致滑动逻辑无法进行； 解决：通过addEventListner监听touchstart事件，可以让元素触发onTouchStart事件。

我们的官方demo ，也会出现这个问题吗

官方demo复现不出来，因为效果展示的部分是在一个高度固定的容器内部展示的；复现过程需要单独起一个demo页，将页面拉长，Carousel放到页面最底部即可

官方demo, 一屏也展示不出来，最底下那个有问题吗

建议不要使用官方demo，用我issue最新的评论代码，在任意一个React项目中试一下，使用IOS机型进行测试。 这个是我们在开发过程中发现的问题，目前仍可以在测试机上稳定复现。

nuonuonuonuoyan commented 1 year ago

这是一个CodeSandBox复现demo：https://9p5jd5.csb.app/ 在安卓和模拟器上均没问题，在部分IOS机型上出现了不能滑动的问题

Yang03 commented 1 year ago

这是一个CodeSandBox复现demo：https://9p5jd5.csb.app/ 在安卓和模拟器上均没问题，在部分IOS机型上出现了不能滑动的问题 收到