vant的h5 picker DatetimePicker change事件不触发。如何停止惯性滚动

  1. 使用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
    },

  2. 使用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 方法才能生效,这一步很重要

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vant2是一个移动端的UI组件库,它提供了许多实用的组件,其中包括datetimepicker组件。datetimepicker组件可以用来选择时间,而且它还提供了一个input事件,可以用来获取用户选择的时间。 在使用datetimepicker组件时,我们可以通过监听它的input事件来获取用户选择的时间。具体来说,当选择器的值发生改变时,datetimepicker组件就会触发一个input事件,我们可以在回调函数中获取到改变后的值(即选择的时间),然后进行相应的处理。 例如,我们可以使用以下代码来监听datetimepicker组件的input事件并获取选择的时间: ```javascript <van-datetime-picker :type="type" :value="value" @input="onDatetimePickerInput" /> ... export default { data() { return { type: 'datetime', value: new Date(), } }, methods: { onDatetimePickerInput(value) { console.log('选择的时间是:', value); // 处理选择的时间 }, }, } ``` 在这个例子中,我们定义了一个datetimepicker组件,并将它的type属性设置为datetime,value属性设置为当前时间。然后,在组件上绑定了一个input事件,并将回调函数设置为onDatetimePickerInput。当用户选择时间后,组件会触发input事件,并将选择的时间作为参数传入回调函数中,我们可以在回调函数中处理这个时间。例如,打印出选择的时间,并进行相应的处理。 总之,通过input事件来获取datetimepicker组件选择的时间非常简单,只需要监听并处理这个事件就可以了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值