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.scrollTop
          setTimeout(() => {
            back = calendarDom.scrollTop
            calendarDom.scrollTop = back - 2
          }, 10)
          setTimeout(() => {
            calendarDom.scrollTop = back
          }, 100)
        }
      })
    },

解决后的效果

在这里插入图片描述

相关文章

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


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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/203703.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

APP测试的测试内容有哪些,常见的Bug分类介绍!

对于产品的手机项目(应用软件),主要是进行系统测试。而针对手机应用软件APP的系统测试,我们通常从如下几个角度开展:功能模块测试、兼容性测试、安装和卸载测试、软件更新测试、性能测试、用户体验性测试、交叉事件测试…

激光切割头组件中喷嘴的作用是什么

喷嘴是一个不可忽视的部件。尽管喷嘴并不起眼,却有着重要的作用;喷嘴一般是与激光切割头同轴的,且形状多样:圆柱形、锥形、缩放型等。 喷嘴的口径尺寸时不相同的,大口径的喷嘴对聚焦来的激光束没有很严苛的要求;而口径…

centos nginx安装及常用命令

nginx配置文件位置 nginx 安装有两种方式一种是联网一键下载,Nginx 配置文件在 /etc/nginx 目录下,一种是源码包可以无网下载,有两个配置文件启动地方一个是安装包存放位置,一是/usr/local/nginx/conf下,启动要看你…

内网渗透隧道技术一netsh

隧道技术 百度百科: 网络隧道技术指的是利用一种网络协议来传输另一种网络协议,它主要利用网络隧道协议来实现这种功能。网络隧道技术涉及了三种网络协议,即网络隧道协议、隧道协议下面的承载协议和隧道协议所承载的被承载协议 在网络安全中…

第二证券:机构争分夺秒抢滩 金融大模型落地为时尚早

本年以来,大模型席卷金融业,一夜之间,简直悉数金融场景都在探索适配大模型接口。但是,志向丰满,实践骨感。有大型金融组织IT部分人士比方,金融大模型从战略规划到安顿落地,有着从“卖家秀”走到…

小波降噪的原理,以及软阈值函数和硬阈值函数的详细定义,应用和区别,以及数学公式的解释!!!看完你就懂了软阈值函数和硬阈值函数

文章目录 前言一、软阈值函数和硬阈值函数是什么?二、软阈值函数和硬阈值函数的区别三、软阈值函数和硬阈值函数的应用四、软阈值函数和硬阈值函数的数学公式总结 前言 小波降噪是一种应用小波理论的信号降噪方法,主要通过减少噪声的干扰,同…

Python基础语法之学习表达式进行符串格式化

Python基础语法之学习表达式进行符串格式化 一、代码二、效果 一、代码 print("11等于%d" % (1 1)) print(f"2/1等于{2 / 1}") print("字符串类型是%s" % type("字符串"))二、效果 坚持追求自己的梦想,即使道路漫长曲折&…

图扑参展高交会-全球清洁能源创新博览会

“相聚鹏城深圳,共享能源盛宴” 第二十五届中国国际高新技术成果交易会(简称“高交会”)于 11 月 15-18 日在深圳盛大开幕。高交会由商务部、科学技术部、工业和信息化部、国家发展改革委、农业农村部、国家知识产权局、中国科学院、中国工程院和深圳市人民政府共同…

python中,or、not的用法

or的用法 在python中,or运算符是一个逻辑运算符,用于在多个条件中选择至少一个为真(True)的情况。 如果条件中的任意一个为真,整个表达式的结果就为真 如: 示例1: 检查两个数字中至少有一个正数 示例2: x True y …

cocos creator-碰撞检测

碰撞检测文档 刚体自行选择,刚体正常设置分组、tag,tag用于区分是哪个物体被碰撞了 正常在一个node下挂载脚本就行 注意:Builtin 2D 物理模块只会发送 BEGIN_CONTACT 和 END_CONTACT 回调消息。ccclass(TestContactCallBack) export class …

uniapp微信小程序实现地图展示控件

最终实现效果: 地图上展示控件,并可以点击。 目录 一、前言 二、在地图上展示控件信息 点击后可进行绘制面图形 1.使用cover-view将控件在地图上展示 2.设置控件样式,使用好看的图标 3.控件绑定点击事件 一、前言 原本使用的是control…

品鉴会通知邀请函制作场景秀源码系统 多种模板+自由DIY 附带完整的搭建教程

网络技术的不断发展,越来越多的企业和个人开始重视网站编辑工作,他们希望通过制作精美的邀请函来展示自己的品牌形象,同时提高网站的吸引力和用户参与度。为了满足这一需求,我们开发了一款名为“品鉴会通知邀请函制作场景秀”的源…

医院电子病历编辑器源码(支持云端SaaS服务)

电子病历系统基于云端SaaS服务的方式,采用B/S(Browser/Server)架构提供,采用前后端分离模式开发和部署。使用用户通过浏览器即能访问,无需关注系统的部署、维护、升级等问题,系统充分考虑了模板化、 配置化…

使用Java对yaml和properties互转,保证顺序、实测无BUG版本

使用Java对yaml和properties互转 一、 前言1.1 顺序错乱的原因1.2 遗漏子节点的原因 二、优化措施三、源码 一、 前言 浏览了一圈网上的版本,大多存在以下问题: 转换后顺序错乱遗漏子节点 基于此进行了优化,如果只是想直接转换&#xff0c…

「Linux」进程等待与替换

💻文章目录 📄前言进程等待进程等待的概念进程等待的方法 进程替换进程替换的概念替换方式 📓总结 📄前言 在如今的时代,多进程编程已经变成了必不可少的一部分,而进程等待、进程替换这两个概念都是作为多进…

SpringMvc集成开源流量监控、限流、熔断降级、负载保护组件Sentinel | 京东云技术团队

前言:作者查阅了Sentinel官网、51CTO、CSDN、码农家园、博客园等很多技术文章都没有很准确的springmvc集成Sentinel的示例,因此整理了本文,主要介绍SpringMvc集成Sentinel SpringMvc集成Sentinel 一、Sentinel 介绍 随着微服务的流行&…

git报错invalid object xxx和unable to read tree xxxxxx

电脑出问题了,导致git仓库像是被损坏了一样,执行git status就会报错unable to read ree,无法正常提交代码至仓库,原因是本地代码仓库.git文件损坏了,无法找到正确的提交历史和路径。 找到了一个解决办法: …

Android NDK项目配置CMake:一个CMakeList.txt配置多个子目录的源代码

文章目录 源码目录CMakeList.txt配置 分享一个项目的CMake配置,或许给你的项目配置提供参考: 源码目录 其中,除了include文件夹只包含头文件,其他文件夹都包含c文件和头文件: CMakeList.txt配置 # For more informa…

JavaScript中的异步处理方法

JavaScript中的异步处理是开发者在日常开发过程中必须面对的一个重要问题。由于JavaScript是单线程的,因此对于一些可能需要长时间执行的操作,如网络请求、IO操作等,如果采用同步的方式,可能会导致应用程序的阻塞,降低…

传感器:探索Android中的传感器功能与使用

传感器:探索Android中的传感器功能与使用 一、传感器介绍1.1 Android 平台三大类传感器1.2 Android 平台支持的传感器1.3 传感器框架 二、传感器的使用2.1 识别传感器和传感器特性2.2 针对不同制造商的传感器或传感器的不同版本优化2.3 监控传感器事件2.4 处理不同的…