记一次分析、解决Vant 2.x版本的Picker选择器偶尔获取值错误问题

前言:我把排查、分析思路、解决过程都记录下来了,有需要改进的地方,敬请不吝赐教。

场景:

迎新管理系统的“信息完善”移动端填报页面需要用到Vant的Picker选择器组件,发现偶尔会出现:用户在选择器中选择了某选项后,代码获取选择器选择的选项与用户选择的项不一致。

分析思路:

情况只是偶尔发生,需要找到发生这种情况的场景,仔细分析该场景与正常的情景有何区别。

分析结果:

1、通过测试发现当选项较少时几乎不会发生这种问题、用户慢慢滑动进行选择时也不会出现这种问题。只有选项较多且用户快速滑动选择项进行选择时会经常出现这个问题。

2、在“选项较多且用户快速滑动选择项进行选择”这个场景下进行多次测试后发现,当选择器组件的选择项存在“快速滑动时惯性滚动”,在此“惯性滚动”未彻底停止时,新选择的选择项数据是没有进行赋值的。所以若此时获取选择器的选择项只能获取到上一次的选择项或者无选择数据。

解决思路:

在获取选择器选中的选项前,确保组件的“快速滑动时惯性滚动”已彻底停止即可。

解决方法:

1、为选择器组件设置ref属性,并绑定confirm事件

目的:在获取选择器选中的选项前,可通过ref获取到 Picker 实例并调用其“confirm”方法,可达到停止惯性滚动并触发 confirm 事件的效果。

PS:不显示选择器的“顶部栏”不会影响confirm事件

<van-picker ref="testPicker" @confirm="onTestConfirm"></van-picker>

2、直接将获取选择器选中的选项这些业务代码直接写在confirm方法里面,通过ref获取到 Picker 实例并调用其“confirm”方法即可。

//选择器选中的选项
function getTestPickerCheckedOption(){
    //通过ref获取到 Picker 实例并调用其“confirm”方法,达到停止惯性滚动并触发 confirm 事件的效果。
    this.$refs.testPicker.confirm();
}
function onTestConfirm(picker){
    //在停止惯性滚动后获取获取选择器选中的选项,并赋值给对应的变量
    this.checkedOption = picker.getValues();
}

PS:

1、官方文档提到可通过设置选择器的“swipe-duration”达到控制“快速滑动时惯性滚动的时长”,但是经测试效果不理想。

2、不显示选择器的“顶部栏”不会影响confirm事件,不需要通过给选择器组件绑定change事件的方式“曲线”获取选择器选中的选项

参考文章:

Vant2 官方文档

文章不足之处还请斧正!

本文By:NonNullPointer --2023/05/29

最后修改:2023 年 05 月 29 日
如果觉得我的文章对你有用,请随意赞赏