vant 日期赋值的坑

最新推荐文章于 2024-08-22 09:43:54 发布
最新推荐文章于 2024-08-22 09:43:54 发布
阅读量504 收藏
点赞数
分类专栏： vant 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45753961/article/details/120750358
版权

日期选择器 动画回弹 渲染完成 前端开发 用户体验
关键词由CSDN通过智能技术生成

业务场景：
选择时间后，
点击开始时间弹窗，显示10-14
点击结束时间弹窗，赋值了10-15，但是还是显示10-14
在这里插入图片描述

问题原因：
vant的日期选择，会有动画回弹，把值回弹回去了。

解决方法：
弹窗打开后，等日期选择器先渲染完毕了，再赋值
在这里插入图片描述

多思考多学习
关注
专栏目录
在Vant的基础上封装下拉日期控件的代码示例
10-17
在介绍如何在Vant框架基础上封装下拉日期控件之前，我们首先要明确Vant是一个流行的基于Vue.js的移动端组件库，它提供了一系列轻量、可靠的基础组件。但在实际的移动开发中，我们往往需要根据具体项目需求对组件进行...
小程序坑（二） Vant时间选择器
againstAllOdds_的博客
04-24 7639
Vant中DatetimePicker 时间选择坑，设置默认时间踩坑（一）更改确认和取消文字踩坑(二)，点击显示空白踩坑(三)，最大时间和最小时间踩坑(四)，点击弹窗弹出时间选择器
vant中的Calendar日历组件type=range时默认当天回显问题
最新发布
qq_41609134的博客
08-22 366
原因是Calendar组件的allow-same-day参数默认值是false，即不允许日期范围的起止时间为同一天，所以一开始初始化赋予起止为同一天是无效的。需要等页面元素渲染完成之后（onMounted）再进行赋值，这时候日历的回显的默认值就是今天-今天啦！然后会发现日历默认选中的并不是今天-今天，而是今天-明天。
VantUI DatetimePicker 时间选择使用过程中无法赋值时间
天麟江的博客
04-28 1590
背景介绍：我们公司的H5View项目使用的是VantUI，而恰好VantUI中提供了DatetimePicker 时间选择，但在使用过程中遇到了一些问题，现在记录如下： 我们写了一个类似于12306的时间控件，要求点击时间的时候，弹出图2的DatetimePicker 控件，同时支持点击“上个月”，“下个月”进行切换，但是，直接使用时间选择控件完全没有问题，点击上一月下一月之后，改变了选择的月份，就会导致，时间选择控件没法定位到已经达到的月份。上月下月使用的是Date对象中month+1或者-1的...
Vant_DatetimePicker_时间选择_选择完整时间
骑大马挎大刀
01-23 2495
结合Cell 单元格，value值绑定显示的内容 结合popup弹出框，使用 <!--结束时间--> <van-cell is-link title="结束时间" :value="value2" @click="showPopup2"/> <van-popup v-model="show2" position="bottom" :style="{ height: '30%' }"> <van-datetime-picker @conf
vant组件关于自定义日期范围van-calendar设置无效
weixin_52102646的博客
05-26 1381
vue项目中组件的使用代码和原文档一样，但是就是不生效，显示min-data与max-data未定义。直接给定变量值然后生效了，真的是奇葩。
vant3+ts 封装uploader上传图片组件
qq_42180156的博客
06-08 2362
因为项目中多次用到这个组件 所以就自己封装了下vant的组件需要在：after-read 之后把图片上传到服务器手机上选择或者拍照 返回的格式是[{name:xxx，data:base64，xxxxx},{name:xxx,data:base64，xxxxx}]而 组件的回显是根据flie对象或者URL所以就需要上传前 把 返回的base64转成file对象图片上传到接口前还需要把图片压缩一遍 整个组件的代码如下公司的上传图片的逻辑是 第一步，把fileNames 上传到后台提供的接口 返回的格式是{url
动态表单中复杂组件的赋值
u012420737的博客
06-24 866
背景 我使用vant-ui+vue实现动态表单的增加和删除，但是遇到类似日期和actionSheet此类组件不知道如何设置数组对象的值 在查阅组件的api时，我发现该类组件大多都无法传递我们额外定义的数据，强制传递既会报错并且也达不到我想要的结果。 困扰了我很久之后，在看之前代码寻找灵感的时候，突然想我为何不在外层fieid组件上处理显隐的时候将当前的item和index传递到data中定义的变量中呢 html <van-field is-link label="类型" name="t.
vant 组件，时间选择器的应用 van-datetime-picker
热门推荐
weixin_49577940的博客
01-17 1万+
vant 组件，时间选择器的应用 van-datetime-picker
关于vant里面的list组件取回来的数组不能直接赋值的问题
m0_59006402的博客
06-14 397
data(){ return { list:[] //接收返回来的数组 } }
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看头条tab栏） ...（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 ...但是，在此时用缓存赋值给 v-model = ” active ”
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
vantweapp源代码
01-25
Vant WeApp是一款基于微信小程序开发的UI组件库，它为开发者提供了丰富的UI组件，用于构建优雅、高效的小程序界面。Vant WeApp源自Vant，一个由有赞公司开发的轻量级移动UI组件库，它在移动端有着广泛的应用。Vant ...
Vant元件框架，产品框架
03-18
这个库包括了如按钮、输入框、列表、轮播图、开关、选择器、日期选择器、步骤条、加载指示器等常见的UI组件。每个组件都经过精心设计和优化，具有良好的性能和兼容性，并且支持主题定制，可以根据品牌的视觉风格进行...
微信小程序+vant-weapp，日历组件多个时间日期回显
weixin_56480344的博客
07-06 2149
日历组件多个时间日期回显不成功
微信小程序中应用van-calendar时加载时间过长，以及设置min-data无效的问题解决
qiqiliuwu的博客
05-31 981
二、vue中min-data的写法是:min-data=“new Date(2023, 0, 1)”，而在小程序中的写法则是min-data=“{{ minData }}”，minData的值为：new Date(2023, 0, 1).getTime()。一、我们微信小程序中应用van-calendar时，如果没有设置min-data，那么页面的加载时间会非常长，所以，1、minData的值只能在js文件中设置，不能直接写进页面里边，因为页面中不能识别 new Date()，会报错；
vant 日期选择器（年选、月选、周选、日选）
Change_xiao的博客
07-18 9889
vant 日期选择器（年选、月选、周选、日选） <van-field v-model="formatDate" is-link readonly arrow-direction="down" label="统计时间" placeholder="请选择统计时间" @click="dateSelect"
Vant-DatetimePicker 时间选择器踩坑
Zzl1804的博客
02-09 1882
遇到问题:改变日期值后,组件返回的日期值未实时更新 问题分析:组件滚动的默认动画时长为1000ms,最新值会在动画结束更新并返回,用户在动画完成前点击确认获取的不是最新值. 解决方案:修改动画滚动时长属性swipe-duration,设置为200ms ...
解决使用vant组件库中van-calendar日历不能回显接口返回的日期问题
hunantai的博客
09-21 1168
给van-calendar设置ref，通过this.$refs.设置的值(接口返回的日期)就ok啦！所以，将代码中的最小日期修改为1990-01-01后，在mounted中重新修改组件的值就可以了。点击calendar组件发现日期还停留在当前日期，而没有回显到接口返回的那一天。查看官网api发现设置的min-date最小日期为今天。接口返回的日期格式为年-月-日。
vant 日期范围选择器
09-26
Vant日期范围选择器是HMS产品中的一个组件，根据引用的描述，它有以下几个要求： - 如果日期范围小于等于7天，则在组件中显示横向滑动的日期栏。 - 如果日期范围大于7天，则在日期栏右侧固定显示一个日历图标。 - 当选择日期后，日期会显示一个特殊标识，表示该日期有特殊的意义。 在实现Vant日期范围选择器的过程中，可以按照以下步骤进行： 1. 创建一个日期选择器组件，可以使用Vant提供的相关组件来实现日期选择的功能。 2. 判断选择的日期范围是否小于等于7天。如果是，则显示横向滑动的日期栏；如果不是，则在日期栏右侧固定显示一个日历图标。 3. 当选择日期后，触发@on-change事件，并清空日期数组。然后通过异步更新数组的方式重新给数组赋值。 以上是根据提供的引用内容对Vant日期范围选择器的简要描述和实现步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值