Vue项目解决van-calendar 显示白色空白,需滑动一下屏幕,才可正常显示

问题描述,如图

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

解决方法

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

js 复制代码
 // 解决打开白屏,滑动后才可
    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)
        }
      })
    },

解决后的效果

相关文章

基于ElementUi再次封装基础组件文档


基于ant-design-vue再次封装基础组件文档


vue3+ts基于Element-plus再次封装基础组件文档

相关推荐
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258593 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
前端小趴菜055 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
P7Dreamer6 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
I'm写代码6 小时前
el-tree树形结构笔记
javascript·vue.js·笔记
斯~内克7 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee1017 小时前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒298 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js