uni-app uni-datetime-picker 组件选择后更新bug

uni-app uni-datetime-picker 组件选择后更新bug

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

操作步骤：

  • 选择时间滚动，在动画未完全停止时点击确定，时间不会更新

预期结果：

  • 希望时间能够更新，或者取消动画 或者动画未停止时不允许确定均可

实际结果：

  • 选择时间滚动，在动画未完全停止时点击确定，时间不会更新

bug描述：

  • 小程序、APP、H5中 uni-datetime-picker 选择更新均有问题。
  • 选择时间或者日期 在滚动还未完全停止时，点击确定不会更新组件值 （附件是官网组件页面上的 操作复现bug视频）
  • 这个停止动画能否关闭， 或者有其他处理方案

Video_2025-07-21_173226.zip


更多关于uni-app uni-datetime-picker 组件选择后更新bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这用到的是picker-view，picker-view 更新数据只有在停下才会更新的

更多关于uni-app uni-datetime-picker 组件选择后更新bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的组件交互问题。当uni-datetime-picker的滚动动画尚未完全停止时，点击确定按钮确实会导致值更新失败。

问题原因： 组件的值更新逻辑与滚动动画状态存在时序冲突。在动画过程中，当前选中的值可能还未完全同步到组件的数据模型中。

临时解决方案：

  1. 添加确认延迟：在点击确定后添加短暂延迟（建议300-500ms）再执行后续业务逻辑
  2. 监听change事件：使用组件的@change事件替代确认按钮的点击事件，确保获取到的是最终确定的值
  3. 禁用快速操作：在UI层面添加加载状态，防止用户在动画期间重复点击

建议处理方式：

// 示例：通过change事件获取最终值
<uni-datetime-picker [@change](/user/change)="onDateChange" />

// 或者添加确认延迟
async handleConfirm() {
  await this.$nextTick()
  setTimeout(() => {
    // 执行值更新逻辑
  }, 300)
}
回到顶部