当前位置: 首页 > news >正文

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

问题描述,如图

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

解决方法

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

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

解决后的效果

在这里插入图片描述

相关文章

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


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


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

http://www.lryc.cn/news/248783.html

相关文章:

  • Linux:可视化管理工具Webmin的安装
  • WARNING: Access control is not enabled for the database.
  • JavaScript编程进阶 – Return语句
  • Python与设计模式--备忘录模式
  • 04_Flutter自定义Slider滑块
  • 服务器数据恢复—EMC存储raid5故障导致上层应用崩溃的数据恢复案例
  • 7.1 Windows驱动开发:内核监控进程与线程回调
  • 基于ssm的汽车论坛管理系统设计与实现
  • 实习开发日志经验总结(一)
  • 【Unity基础】8.简单场景的搭建
  • 傅里叶变换及其在机器学习中的应用
  • xorm源码学习
  • Vue3中的<script setup>和<script>的区别
  • Docker笔记-Docker搭建最新版zabbix服务端(2023-07-31)
  • QT配合CSS隐藏按钮
  • 2023亚太地区数学建模C题思路分析+模型+代码+论文
  • Linguistic Steganalysis in Few-Shot Scenario论文阅读笔记
  • 详细学习Pyqt5的4种项目部件(Item Widget)
  • notepad++ 插件JSONView安装
  • AKConv:具有任意采样形状和任意数目参数的卷积核
  • 如何使用C++开发集群服务
  • docker安装以及idea访问docker
  • 激光切割头组件中喷嘴的作用是什么
  • 腾讯云双11活动最后一天,错过再等一年!
  • Java实现飞翔的鸟小游戏
  • Python网络请求初级篇:使用Requests库抓取和解析数据
  • 详解API开发【电商平台API封装商品详情SKU数据接口开发】
  • 后端项目连接数据库-添加MyBatis依赖并检测是否成功
  • C++ CryptoPP使用RSA加解密
  • 从实践角度深入探究数据驱动和关键字驱动测试方法!