#6088·vant-weapp

[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 版本

[email protected]

描述一下你遇到的问题。

Calendar的默认高度是80%动态高度,在部分手机上正好达到月份变化的临界点高度,会导致组件打开的时候当前月是空白的标题也是空白的的,然后调整这个高度后就好了,或者向上滚动到上个月份,一滚动触发当前月就出来了,必须动一下(目前是通过限定高度了解决的,固定了580px非80%)

重现步骤

1.popup中引入calendar 2.点击打开calendar 3.部分手机打开

设备/浏览器

iPhone 16或iPhone 13mini 飞书或微信浏览器打开