Vue项目解决van-calendar 打开下拉框显示空白（白色），需滑动一下屏幕，才可正常显示

wocwin

已于 2023-12-01 16:50:27 修改

阅读量1.4k

点赞数 10

分类专栏： Vue H5移动端项目基于vant-ui二次封装移动端基础组件 vue专栏文章标签： vue.js vant2 van-calendar 显示白色空白移动端 vant-ui

于 2023-11-30 11:18:48 首次发布

本文链接：https://blog.csdn.net/cwin8951/article/details/134707533

版权

vue专栏同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Vue H5移动端项目

15 篇文章 1 订阅

订阅专栏

基于vant-ui二次封装移动端基础组件

8 篇文章 0 订阅

订阅专栏

文章讲述了在H5移动端使用Vant的van-calendar组件时遇到的初始化空白问题，通过绑定openCalendar事件并添加延迟滚动动画解决了这个问题。作者还提及了其他基于Vue的UI库基础组件封装文档的相关链接。

摘要由CSDN通过智能技术生成

问题描述，如图

ipad(平板）或者 H5移动端引入Vant组件的日历组件（van-calendar），初始化显示空白，需滚动一下屏幕，才可正常显示

解决方法

需在van-calendar上绑定@open="openCalendar"事件

 // 解决打开白屏，滑动后才可
    openCalendar() {
      this.$nextTick(() => {
        const calendarDom = document.querySelector('.van-calendar__body')
        if (calendarDom) {
          let back = calendarDom.scrollTop
          setTimeout(() => {
            back = calendarDom.scrollTop
            calendarDom.scrollTop = back - 2
          }, 10)
          setTimeout(() => {
            calendarDom.scrollTop = back
          }, 100)
        }
      })
    },