-
使用vant的picker滑动选择功能时,发现滑动每停止时,关闭了picker组件change事件没有触发。于是乎出现了这种情况,刚才明明选的2月5号,怎么还是显示的上一个选择的值。
解决方案:贴代码 <van-picker ref=“columnsValuePicker” :default-index=“defaultIndex” :columns=“columns” @change=“onChange” />
然后在关闭选择器的按钮事件中(这个事件是绑定在自己写的button上),强制暂停惯性滚动,进而触发onChange事件,更新选中的值。
sure () {
this.$refs.columnsValuePicker.confirm()
}
onChange (picker, value, index) {
this.columnsValue = value
}, -
使用vant的 DatetimePicker时,也会出现滑动快了,点了自己写的确定按钮关闭了选择器,最后的时间不是自己选的时间。
看了官网文档,有个getPicker方法,用于获取picker实例,再调confirm强制暂停惯性滚动。
贴代码
<van-datetime-picker ref=“timePicker” class=“time-left”
v-model=“currentDate”
type=“month-day”
@confirm=“onDatetimeConfirm”
title=“选择月日”
:show-toolbar=“false”
:min-date=“minDate”
:max-date=“maxDate”
:formatter=“formatter”>
onDatetimeConfirm (value) {
this.currentDate = value
}
sure () { this.¥refs.timePicker.getPicker().confirm() } 注意只调用this.$refs.timePicker.getPicker().confirm())是无法更新选择的时间,要写onDatetimeConfirm 方法才能生效,这一步很重要
vant的h5 picker DatetimePicker change事件不触发。如何停止惯性滚动
最新推荐文章于 2024-03-12 13:53:20 发布