Angular Primeng组件在iOS设备上滑动功能失效问题求助

问题背景 #

PrimeNG Carousel组件在iOS设备上无法通过手势滑动切换轮播图，该功能在Chrome响应式模式及Android设备上正常工作。目前已修复垂直滑动问题，但水平手势滑动仍失效，相关官方Issue已存在但暂无解决方案。

复现步骤 #

• 在iOS设备上打开PrimeNG Carousel官方示例页面
• 多次尝试用手势水平滑动轮播图，观察切换功能是否生效

解决方案建议 #

• 适配iOS触摸事件机制
  iOS的触摸事件逻辑与桌面端存在差异，可尝试手动绑定touchstart/touchmove/touchend事件：

  • 在touchstart时记录初始触摸坐标
  • 在touchmove中计算水平位移，当位移达到设定阈值时，调用Carousel的prev()或next()方法触发切换
  • 给Carousel容器添加CSS属性touch-action: pan-y，避免iOS系统默认触摸行为干扰水平滑动

• 调试事件触发状态
  使用Safari开发者工具连接iOS设备，检查触摸事件是否正常触发：

  • 确认touchstart能正确获取初始坐标
  • 排查touchmove事件是否被阻止冒泡或默认行为，导致位移数据无法正常获取

• 临时修改组件源码
  若官方暂未发布修复版本，可尝试修改Carousel的手势处理逻辑：

  • 将原有基于鼠标事件的处理替换为PointerEvent，iOS对Pointer事件的支持更完善
  • 调整滑动触发阈值，适当降低iOS设备上的位移阈值，匹配系统触摸灵敏度

• 引入第三方手势库
  使用Hammer.js等跨平台手势库替代组件自带的手势处理：

  • 给Carousel容器绑定swipeleft和swiperight事件，直接调用轮播切换方法
  • 配置Hammer.js的touchAction: 'pan-y'，避免与系统触摸行为冲突

内容的提问来源于stack exchange，提问作者Fran Perea