【微信小程序-原生 + Vant Weapp】DatetimePicker组件切换日期时跳来跳去的解决办法

已于 2023-09-19 14:09:46 修改
阅读量940 收藏
点赞数
分类专栏： 微信小程序 自定义组件 文章标签： 前端 微信小程序 vant
于 2023-02-18 09:43:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Komorebi_00/article/details/129096944
版权
本文介绍了在微信小程序中使用Vant Weapp的DatetimePicker组件时遇到的日期跳动问题及解决方案。通过移除事件监听，并在弹窗关闭时将值设为null，解决了滑动时的不稳定现象。
摘要由CSDN通过智能技术生成

问题描述

原本的写法是添加了bind:input="onInput" 事件，并在js文件中加入了如下代码：

onInput(e) {
   
	this.setData({
   
      currentDate: e.detail,
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Komorebi゛
关注
专栏目录
订阅专栏
【微信小程序-原生 + Vant Weapp】LicenseKeyboard 车牌号键盘输入组件
Komorebi_00的博客
06-16 678
车牌号输入键盘
DateTimePicker微信小程序日期选择年月日时分秒
08-10
DateTimePicker 微信小程序日期选择 [年，月，日，时，分，秒]
vant 组件Popup和DatetimePicker 在小程序的结合使用
xie_candy的博客
09-19 2235
如图，开始时间和结束时间复用一个时间组件，在每次点击选择时间时，应默认选中上次选择的时间，所以开始时间和结束时间应区分开来。 因为设计图的时间格式yyyy-mm-dd，获取的时间格式是 yyy/mm/dd，注意时间的转换处理，<van-datetime-picker>中value格式为毫秒，否则会报错 在app.json或index.json中引入组件 "usingComponents": { "van-datetime-picker": "@vant/weapp/dateti...
微信小程序时分秒选择picker
最新发布
m0_65641258的博客
08-06 556
微信小程序picker只有时分选择，但我们工作中可能会用到时分秒选择如果想使用年月日时分秒都有的可以在中自行修改（有注释）。在网上看了很多都并不是单一时分秒选择，所以就看着别人的修改了一下，毕竟需求是只需要时分秒。
微信小程序 vant 封装DatetimePicker时间选择器
蓝胖子的博客
01-17 3824
效果： 1.在components文件下新建dateTimePicker文件 在index.wxml文件中编写： <view class="container" bindtap="showPop"> <van-popup show="{{ isShowpopup }}" bind:close="onClose" position="bottom"> <van-datetime-picker type="date" value="{{ curr
微信小程序之picker日期和时间选择器
08-31
本篇文章主要介绍了微信小程序之picker选择器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序van-datetime-picker打开后设置默认时间如：当天
shi450561200的博客
05-08 1864
type 类型是type="datetime" 别写成type=“datehour”，否则会失效。
微信小程序npm引入vant-weapp的踩坑记录
10-16
本文详细记录了在微信小程序项目中引入vant-weapp（一种基于Vue的轻量、可靠的移动端UI框架）时所遇到的一些问题及其解决方法。以下将根据文章内容，详细阐述微信小程序中使用npm引入依赖的流程、遇到的问题以及解决...
基于taro2进行多端组件开发，迁移vant-weapp的组件库，兼容h5、微信小程序端、支付宝小程序端。.zip
02-19
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同...
vant的DatetimePicker 时间选择在微信小程序中使用时跳来跳去的解决办法
weixin_46974834的博客
09-14 1373
vant的DatetimePicker 时间选择在微信小程序中使用时跳来跳去的解决办法
微信小程序 - 自定义封装 date-picker | 日期选择组件
lanyu_er的博客
04-01 821
兼容Android｜IOS｜Windows｜Mac。
实现微信小程序日期时间控件dateTimepicker
enzai的博客
11-12 4099
这是这篇文章的扩展小程序实现日期时间控件picker - 菜工 - 博客园 主要是实现了微信timepicker 的相同属性接口 以下就是代码了 注意：这个可能是有问题的。如果是有问题。希望能及时反馈，把它完善好 index.wxml <picker mode="multiSelector" value="{{valueArray}}" range="{{rangeValues}}" bindcolumnchange="handleColumnChange" bindchange=...
小程序日期（日历）时间 选择器组件
少年的范儿的博客
02-24 6287
封装一个很好用 小程序的日期（日历）时间组件，日期用日历选择，时间用 小程序 的 picker-view 来实现
vant的DatetimePicker 和 Popup结合使用
Wangdr的博客
04-12 5712
效果图 <van-popup v-model="show" position="center" :overlay="true" transition="0s easing"> <div class='picker_box'> <p class='set'>设置店铺折扣率</p> <div clas...
微信小程序日期时间组件的封装
weixin_42601134的博客
02-15 297
微信小程序提供了日期时间选择器组件picker和日历组件calendar，但如果需要自定义样式或者功能，可以考虑封装一个日期时间组件。 以下是一个简单的日期时间组件的封装示例： 在/components目录下创建一个datetime-picker文件夹，创建datetime-picker.wxml、datetime-picker.wxss、datetime-picker.js和datetime-...
vue 实现日期选择器(time-picker)与Popup结合-----vant
qq_39897978的博客
02-05 2705
刚开始本来想用ant-design-mobile，但是react的库和vue不兼容，所以最后找到了vux ,但是这个包有问题 ，最后就找到了vant的库，使用它的datepicker和popup组件，实现了我的功能，点击选择日期就弹出选择框： <el-form-item label="日期" > <el-input class="...
vant-weapp datetime-picker 只选择年份
Spy97的博客
04-18 676
微信小程序中，使用了vant 组件，在datetime-picker中，没有年份选择器，对源码进行修改，以支持
微信小程序多列选择器实现日期+时间的选择
aaa123aaasqw的博客
05-12 2980
【代码】微信小程序多列选择器实现日期+时间的选择。
微信小程序快速集成vant-weapp教程
微信小程序引入 vant-weapp 是为了在小程序开发中使用 vant 这个流行的移动端 UI 库，它提供了丰富的组件和样式，帮助开发者快速构建美观的用户界面。 vant-weapp 是 vant UI 专门为微信小程序定制的版本。 1. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Komorebi゛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值