vant weapp日历组件性能优化 Calendar 日历添加min-date最小日期页面加载缓慢

最新推荐文章于 2024-08-23 17:33:44 发布
最新推荐文章于 2024-08-23 17:33:44 发布
阅读量4.5k 收藏 5
点赞数 3
分类专栏： 小程序 文章标签： 小程序日历 小程序日历加载缓慢 vant 日历组件性能 vant日历最小日期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Taurus_0811/article/details/118249432
版权
通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

官方文档明确强调，通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

故我们需要根据具体业务需求适当修改页面展现方式
Calendar 日历组件使用条件

1、如若选择未来几个月内的日期、区间推荐使用；
2、区间不会太大；

日期picker

除上述条件，需要使用日期的，最好使用picker（mode=date）组件，或者vant-weapp也有对应的van-datetime-picker组件，虽然没有日历组件那么美观，但是加载速度快呀！

【拾光静好 微微一笑】
关注
专栏目录
【微信小程序-原生 + Vant Weapp】DatetimePicker组件切换日期时跳来跳去的解决办法
Komorebi_00的博客
02-18 973
微信小程序：时间日期组件DatetimePicker
vue 日期面板_基于Vue2-Calendar改进的日历组件（含中文使用说明）
weixin_39712016的博客
12-19 544
一，前言我是刚学Vue的菜鸟，在使用过程中需要用到日历控件，由于项目中原来是用jQuery写的，因此用了bootstarp的日历控件，但是配合Vue实在有点蛋疼，不够优雅……于是网上搜了好久找到了Vue2-Calendar，不用说，挺好用的，但是同时也发现这个组件有些问题，有些功能挺不符合我们的要求，于是着手改了一版二，改进的功能在Vue2-Calendar v2.2.4 版基础上作了优化。1.改...
微信小程序中使用vant中的Calendar 日历组件
guairena的博客
05-17 9261
需求：   小程序需要实现日历的需求，可以单选、可以选择区间、节假日和周六颜色高亮、返回本月。具体如图，类似猫眼app的日历选择。 思路： 参考市场上含有日历的小程序及app，确定是自己实现还是使用组件，骨朵使用的是Pikaday。 确定使用Vant Weapp组件库中日历。 需要对源码进行一些修改，首先样式的修改、包括顶部周日到周六、节假日及周六日日期的颜色、返回本月按钮的添加及样式。 前后实现了三种展示日历的不同方式 4-1. 第一种，根据官方示例引入日历组件，平铺整个页面。选择日期后会跳转返回列表
微信小程序中应用van-calendar时加载时间过长，以及设置min-data无效的问题解决
qiqiliuwu的博客
05-31 964
二、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-weapp框架van-calendar日历组件默认选中日期default-date属性设置失效的问题
最新发布
MingerOne的博客
08-23 355
一开始直接在data中设置默认值，发现并未生效，点开日历选择组件显示的是最小日期需要在setData中进行赋值才能生效很离谱，明明官方文档里是可以在data中赋值的
vant 日历组件优化
smz8023的博客
11-14 1598
vant 日历组件卡顿优化
Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate
热门推荐
CSSAJBQ_的博客
11-23 1万+
1.默认日历时间范围是当前时间到往后的6个月，可通过 min-date 和 max-date 自定义日历的范围
vue项目中vant ui日期选择器Calendar踩坑记录（弹出、minDate设置...）
start_sea的博客
12-28 1万+
vue项目中vant ui日期选择器Calendar踩坑记录（弹出、minDate设置…） 感觉vant ui组件库在移动端使用还挺方便，最近上手，顺便记录下 1、vue项目使用Calendar日历组件实现弹出： vant ui是一款小程序ui组件库，官方文档也是小程序的写法，在vue项目中使用写法有些不同。 直接v-module指令控制。 <van-calendar type="range" v-model="showCalendar" title='请选择日期' /> data() {
Vant 日历calendar组件修改下面的开始结束文字
m0_46554818的博客
08-12 1370
想要首次打开的时候 下面的“开始”文字消失 想要这样的效果 这个项目是基于vue框架，ts开发的，方法写法可能有所不同，使用时注意一下 <van-calendar safe-area-inset-bottom v-model="calendarShow" :max-range="7" type="range" allow-same-day :min-date="minDate" :max-date="maxDate" :formatter="formatte
基于vant组件的日历页面的修改，只显示一个月份，页面上通过点击左右按钮来实现对月份的切换
mingwang_的博客
08-03 8177
在进行移动端开发的时候遇到一个需求，只显示一个月份，页面上通过点击左右按钮来实现对月份的切换。 效果图如下： 直接上代码 <!--我的 --> <template> <div class="lalal"> <img src="../../assets/images/less.png" class="img1" @click="arrowLeft()"> <img src="../../assets/images/greater.png" c
vant 时间组件在苹果手机弹出问题
weixin_45266081的博客
12-20 693
如果设置的值为 new Date(‘xxxx,xx,xx’)，带字符串的，安卓手机没有问题，但是苹果手机会存在问题，这种问题多用于处理获取当前日期返回导致，如下设置的最小时间是利用自定义函数返回，返回的类型为String类型，苹果出现弹窗问题，安卓没问题。vant 最大时间与最小时间可用new Date(xxxx,xx,xx)来进行设置。
vant组件--日历组件van-calendar初始化显示空白，滑动一下屏幕才显示（ios系统出现的问题）
qq_48499167的博客
06-29 997
日历组件van-calendar初始化显示空白，滑动一下屏幕才显示（ios系统出现的问题）
vant组件弹出层弹出失效，页面卡死
胡图图的博客
06-15 2130
vant 组件 弹出层失效，页面卡死
微信小程序中@vant/weapp的组件van-calendar及van-picker显示异常问题
longlongValue
01-07 1433
由于新的项目需求将来部署环境可能设计小程序及PC端，在技术选型的时候也增纠结过uniapp+uView2.0还是微信小程序原生+vant。当然了，从标题想必也看出来我选了什么了。本来以为会很顺利的将页面原型百分之九十九点九九九九…的还原出来，但是往往事非人愿，新建了小程序并集成了weapp vant以后，并非一帆风顺。
vant组件关于自定义日期范围van-calendar设置无效
weixin_52102646的博客
05-26 1372
vue项目中组件的使用代码和原文档一样，但是就是不生效，显示min-data与max-data未定义。直接给定变量值然后生效了，真的是奇葩。
解决使用vant组件库中van-calendar日历不能回显接口返回的日期问题
hunantai的博客
09-21 1162
给van-calendar设置ref，通过this.$refs.设置的值(接口返回的日期)就ok啦！所以，将代码中的最小日期修改为1990-01-01后，在mounted中重新修改组件的值就可以了。点击calendar组件发现日期还停留在当前日期，而没有回显到接口返回的那一天。查看官网api发现设置的min-date最小日期为今天。接口返回的日期格式为年-月-日。
推荐开源项目：wx-Calendar - 微信小程序日历组件
gitblog_00043的博客
04-01 857
推荐开源项目：wx-Calendar - 微信小程序日历组件 wx-calendar项目地址:https://gitcode.com/gh_mirrors/wx/wx-calendar 项目简介 是一个由lsp 开发的微信小程序全功能日历组件。它提供了丰富的自定义选项和美观的界面设计，旨在帮助开发者轻松地在微信小程序中构建功能齐全的日历功能。 技术分析 wx-Calendar 是基于微信小程序开...
vant 时间选择器在ios打开空白问题
chongyang466的博客
12-01 2295
在ios中使用vant的时间日期选择器显示空白： 在创建 Date 对象时不能使用new Date(‘2020-01-01’)，iOS 不支持以中划线这种格式，正确写法是new Date(‘2020/01/01’)
vantweapp日历
07-27
Vant Weapp 是一套基于 Vant UI 组件库的小程序 UI 框架，它提供了一系列的组件和 API，方便开发者快速构建小程序界面。在 Vant Weapp 中，也包含了一个日历组件。这个日历组件可以用于显示日期、选择日期、设置日期...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

【拾光静好 微微一笑】

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

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

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

打赏作者

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

抵扣说明：

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

余额充值