[Bug Report] Calendar在部分手机上渲染空白(和可视区高度有关系)
Author: ourpalm-zhengfukunCreated May 19, 2026Updated May 19, 2026
Labelsbug: need confirm
重现链接
`
<van-nav-bar title="选择时间范围" left-text="取消" @click-left="$emit('close')" />
<!-- 快捷选项 -->
<van-cell-group>
<van-cell title="快捷选择" />
<div class="quick-buttons">
<van-button
v-for="option in quickOptions"
:key="option.value"
:type="selectedQuickOption === option.value ? 'primary' : 'default'"
size="small"
@click="selectQuickOption(option.value)"
>
{{ option.text }}
</van-button>
</div>
<!-- 自定义日期范围 -->
<van-cell
title="选择日期区间"
:value="customDateRangeText"
is-link
@click="showCustomDatePicker = true"
class="cell-title-small"
/>
<van-calendar
v-model:show="showCustomDatePicker"
type="range"
allow-same-day
:min-date="minDate"
:max-date="maxDate"
@confirm="onCustomDateConfirm"
@cancel="showCustomDatePicker = false"
confirm-text="完成"
confirm-disabled-text="请选择结束时间"
:default-date="calendarDefaultDate"
/>
</van-cell-group>
</div>
<!-- 确认按钮 -->
<div class="picker-actions">
<van-button block type="primary" @click="handleConfirm">确定</van-button>
</div>
Vant Weapp 版本
描述一下你遇到的问题。
Calendar的默认高度是80%动态高度,在部分手机上正好达到月份变化的临界点高度,会导致组件打开的时候当前月是空白的标题也是空白的的,然后调整这个高度后就好了,或者向上滚动到上个月份,一滚动触发当前月就出来了,必须动一下(目前是通过限定高度了解决的,固定了580px非80%)
重现步骤
1.popup中引入calendar 2.点击打开calendar 3.部分手机打开
设备/浏览器
iPhone 16或iPhone 13mini 飞书或微信浏览器打开
Source: youzan/vant-weapp