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再次封装基础组件文档

相关推荐
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
鱼樱前端9 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆11 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅11 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水12 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了12 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry13 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户261245834016115 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川15 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术16 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model