uni-app—— uni-app 滚轮选择器惯性滚动导致弹框无法关闭的解决方案

问题背景

在小程序开发中，选择器（Picker）是非常常用的表单组件。用户通过滚动滚轮选择选项，然后点击"完成"确认选择。

然而在实际使用中，我们发现一个诡异的问题：用户快速滑动滚轮后立即点击"完成"，弹框有时不会关闭，仍然遮挡在页面上。

问题复现

操作步骤：

关键点：如果等滚轮完全停止后再点击"完成"，则一切正常。问题只出现在"滚轮还在动的时候点击完成"。

问题分析

根本原因：滚动惯性（Momentum Scrolling）导致的状态同步问题

wd-picker 是基于滚轮的选择器组件，其内部实现依赖于滚动事件。当用户快速滑动并松手后，滚轮会继续惯性滚动一段时间，这就引发了一系列问题。

1. 滚动惯性与事件竞态（Race Condition）

用户操作时序：
┌─────────────────────────────────────────────────────────┐
│ 手指滑动 → 松手 → 惯性滚动中 → 点击"完成" │
│ ↑ ↑ │
│ scrolling confirm 触发 │
│ ↓ ↓ │
│ scrollend 待触发 但状态未同步！ │
└─────────────────────────────────────────────────────────┘

当用户在惯性动画未结束时点击"完成"，会触发 confirm 事件与 scrollend 事件的竞态条件：

• confirm 事件期望获取最终选中值
• 但 scrollend 还没触发，选中值还在变化中
• 导致内部状态未同步完成

2. 值锁定机制缺陷

滚轮选择器的工作原理：

// 滚轮选择器内部逻辑（伪代码）
class WheelPicker {
scrolling = false
pendingValue = null
confirmedValue = null

onScrollStart() {
this.scrolling = true
// 进入「值待定」状态
}

onScrollEnd() {
this.scrolling = false
this.pendingValue = this.calculateCurrentValue()
// 滚动停止后才能锁定值
}

onConfirm() {
if (this.scrolling) {
// 问题：滚动中确认，值还没锁定！
// 组件可能忽略此次确认，或产生异常行为
return
}
this.confirmedValue = this.pendingValue
this.closePopup()
}
}

惯性滚动期间，组件处于「值待定」状态，此时触发确认操作会被忽略或产生异常行为。

3. 弹窗关闭依赖链断裂

弹窗关闭的正常流程：

confirm 事件触发 → 获取选中值 → 触发回调 → 关闭弹窗
↓
(scrolling=true 时)
↓
内部状态异常 → 跳过关闭流程 → 弹窗不关闭！

解决方案

方案对比

最终方案：使用 wd-select-picker 替代 wd-picker

<!– 修复前：使用滚轮选择器 –>
<wd-picker
v-model="subjectLevel1"
:columns="level1Columns"
label="一级科目"
@confirm="onLevel1Confirm"
/>

<!– 修复后：使用点击式选择器 –>
<wd-select-picker
v-model="subjectLevel1"
:columns="level1Options"
label="一级科目"
@confirm="onLevel1Confirm"
/>

数据结构调整

// 修复前：wd-picker 使用的二维数组结构
const level1Columns = ref([
[
{ label: '人员经费', value: '1' },
{ label: '公用经费', value: '2' },
{ label: '专项经费', value: '3' },
]
])

// 修复后：wd-select-picker 使用的一维数组结构
const level1Options = ref([
{ label: '人员经费', value: '1' },
{ label: '公用经费', value: '2' },
{ label: '专项经费', value: '3' },
])

为什么 wd-select-picker 能解决问题？

wd-select-picker 是基于点击的列表选择器：

点击式选择器采用「点击即选中」的交互模式：

• 用户点击某个选项，该选项立即被选中
• 状态变更是同步且确定的
• 从根本上避免了竞态条件

修复前后对比

修复前（存在竞态）

用户快速滑动 → 惯性滚动中 → 点击完成
↓
scrollend 未触发
↓
confirm 获取到的值不确定
↓
弹窗关闭逻辑被跳过 → 弹窗不关闭！

修复后（状态同步）

用户点击选项 → 立即选中 → 点击完成
↓
值已确定（同步）
↓
confirm 正常执行 → 弹窗正常关闭

技术总结

1. 滚轮选择器的惯性滚动是把双刃剑

惯性滚动提升了滑动体验，但也引入了状态同步问题。在以下场景需要特别注意：

• 用户可能在滚动未停止时触发其他操作
• 依赖滚动停止后的状态做后续处理

2. Race Condition 在 UI 交互中的表现

竞态条件不仅存在于多线程编程中，在 UI 交互中同样常见：

• 动画未完成时触发下一个操作
• 异步请求未返回时用户重复点击
• 滚动惯性与用户点击的时序冲突

3. 「避免问题」优于「修补问题」

面对复杂的组件内部 bug，有时候换一个组件比修补原组件更简单高效：

• 修补原组件：需要深入理解内部实现，可能引入新问题
• 换用替代组件：从根本上绕过问题，风险更低

4. 组件选型时考虑交互特性

选择 UI 组件时，不仅要看外观，还要考虑交互特性：

关键词：滚轮选择器、惯性滚动、Race Condition、竞态条件、wd-picker、wd-select-picker、弹窗不关闭

适用场景：小程序开发、移动端表单、Picker 组件选型、UI 交互问题排查