slider组件在uni-app IOS nvue中 手指触碰进度条小点会直接点到进度条最后100%位置，Failed "touchend" on div

slider组件在uni-app IOS nvue中 手指触碰进度条小点会直接点到进度条最后100%位置，Failed “touchend” on div

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：iphone 12

页面类型：nvue

vue版本：vue3

打包方式：离线

操作步骤：

slider组件在IOS nvue中 手指触碰进度条小点会直接点到进度条最后100%位置，有报错信息打印：[JS Framework] Failed to invoke the event handler of "touchend" on div (1764)：

预期结果：

slider组件在IOS nvue中 手指触碰进度条小点拖动到哪个位置暂停在哪个位置

实际结果：

slider组件在IOS nvue中 手指触碰进度条小点会直接点到进度条最后100%位置

bug描述：

slider组件在IOS nvue中 手指触碰进度条小点会直接点到进度条最后100%位置，报错信息如下：[JS Framework] Failed to invoke the event handler of "touchend" on div (1764)：

更多关于slider组件在uni-app IOS nvue中 手指触碰进度条小点会直接点到进度条最后100%位置，Failed "touchend" on div的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于slider组件在uni-app IOS nvue中 手指触碰进度条小点会直接点到进度条最后100%位置，Failed "touchend" on div的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS nvue环境下slider组件的兼容性问题。问题原因主要是iOS的触摸事件处理机制与nvue渲染层存在冲突，导致touchend事件未能正确触发。

建议尝试以下解决方案：

  1. 临时解决方案：
<slider @touchstart="handleTouchStart" @touchend="handleTouchEnd"/>

function handleTouchStart(e) {
    e.preventDefault()
}

function handleTouchEnd(e) {
    e.preventDefault()
}
  1. 或者改用原生slider组件：
<view>
    <slider :value="value" @change="onChange" />
</view>
  1. 如果问题仍然存在，可以考虑使用条件编译针对iOS平台使用不同的UI实现：
<!-- #ifdef APP-NVUE && IOS -->
<custom-slider />
<!-- #endif -->
<!-- #ifndef APP-NVUE || !IOS -->
<slider />
<!-- #endif -->
回到顶部