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/215534.html

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

相关文章

SAP GRID-ALV复选框+GRID事件

实现功能: 复选框\设置复选框是否可编辑\实现changed_finished事件. 一、ALV增加复选框: 1.1、在输出内表里增加一个SEL的字段: sel TYPE c, 1.2、在build_fieldcat FORM里设置checkbox属性和edit属性,并输出SEL字段:…

机器人制作开源方案 | 校园餐具回收分类机器人

作者:梁桥、吴振宇、凌福海、李清轩、姜晓敏 单位:华北科技学院 指导老师:韩红利、张伟杰 1. 场景调研 1.1 项目实施目的 受新冠病毒引起的影响,人们生产生活发生了巨大的改变。现处于疫情防控常态化阶段,为应对点状…

ElementUI+vue+nodejs培训学校课程预约网站的设计与开发

该系统将采用B/S结构模式,前端部分主要使用html、css、JavaScript等技术,使用Vue和ElementUI框架搭建前端页面,后端部分将使用Nodejs来搭建服务器,并使用MySQL建立后台数据系统,通过axios完成前后端的交互,…

题目:神奇的进制

解题思路: 用电脑自带的计算器,切换到程序员模式。里面有进制转换功能。 由题目,要求严格递增且都为字母,还要大于2023,则数字16进制为ABC。

❀My学习Linux命令小记录(10)❀

目录 ❀My学习Linux命令小记录(10)❀ 36.fold指令 37.expr指令 38.iperf指令 39.telnet指令 40.ssh指令 ❀My学习Linux命令小记录(10)❀ 36.fold指令 功能说明:控制文件内容输出时所占用的屏幕宽度&#xff0c…

智能优化算法应用:基于供需算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于供需算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于供需算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.供需算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

基于PHP的在线日语学习平台

有需要请加文章底部Q哦 可远程调试 PHP在线日语学习平台 一 介绍 此日语学习平台基于原生PHP开发,数据库mysql。系统角色分为用户和管理员。(附带参考设计文档) 技术栈:phpmysqlphpstudyvscode 二 功能 学生 1 注册/登录/注销 2 个人中心 3 查看课程…

善网商城上线洁柔产品 公益人专享爱心价官方正品

近日,中国善网慈善商城(以下简称善网商城)系统经升级后重新上线。目前善网商城线上销售的中顺洁柔旗下慈善产品已顺利获得中顺洁柔纸业股份有限公司授权,双方就合作事宜达成共识,并于近日签订线上经营授权书。 &#x…

Optional源码分析(涉及Objects源码和Stream源码)

研究Optional源码之前先谈一谈Objects源码。 主要代码&#xff1a; ForceInlinepublic static <T> T requireNonNull(T obj) {if (obj null) {throw new NullPointerException();} else {return obj;}}ForceInlinepublic static <T> T requireNonNull(T obj, Str…

C/C++,图算法——凸包的快速壳(Quick Hull)算法的源代码

1 文本格式 // C program to implement Quick Hull algorithm // to find convex hull. #include<bits/stdc.h> using namespace std; // iPair is integer pairs #define iPair pair<int, int> // Stores the result (points of convex hull) set<iPair>…

外包干了2个月,技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…

Linux --- 进程控制

目录 1. 进程创建 1.1. 内核数据结构的处理 1.2. 代码的处理 1.3. 数据的处理&#xff1a; 方案一&#xff1a;fork创建子进程的时候&#xff0c;直接对数据进行拷贝处理&#xff0c;让父子进程各自私有一份 方案二&#xff1a;写实拷贝(copy on write) 1.4. fork常规用…

RocketMQ-整合SpringBoot

SpringBoot整合RocketMQ 创建Maven工程&#xff0c;引入关键依赖&#xff1a; <dependencies><dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.2</ver…

flutter开发实战-readmore长文本展开和收缩控件

flutter开发实战-readmore长文本展开和收缩控件 当长文本展开和收缩控件&#xff0c;我们需要使用readmore来处理长文本展开和收缩&#xff0c;方便阅读 一、引入readmore 在工程的pubspec.yaml中引入插件 readmore: ^2.1.0ReadMoreText的属性如下 const ReadMoreText(this.…

Pandas操作数据库

一&#xff1a;Pandas读取数据库数据 二&#xff1a;Pandas读取海量数据 三&#xff1a;Pandas向数据库存数据 四&#xff1a;Pandas写入海量数据

低噪声,带内置 ALC 回路的双通道均衡放大器,应用于立体声收录机和盒式录音机的芯片D3308的描述

D3308 是一块带有 ALC 的双通道前置放大器。它适用于立体声收录机和盒式录音机。采用 SIP9、SOP14 的封装形式封装。 主要特点 带内置 ALC 回路的双通道均衡放大器 低噪声: VNIl.OuV(典型值)。开环电压增益高: 80dB (典型值)工作电源电压范围宽: 通道间的…

EPS地形图绘制技巧--快捷键

如何导入外业点数据&#xff1f; &#xff08;1&#xff09;打开EPS软件&#xff0c;新建一个工程。如下&#xff1a; &#xff08;2&#xff09;在【文件】-【输入输出】-【调入坐标文件数据】中&#xff0c;调入测量点数据&#xff0c;如下&#xff1a; &#xff08;3&#…

基于粒子群算法思想的电动汽车充放电策略-V2G模型-程序代码!

电动汽车充放电对电网的安全稳定带来影响&#xff0c;合理规划电动汽车充放电时间和策略是目前的研究热点。本程序仿真了汽车有序充电和无需充电两种案例&#xff0c;利用电动汽车合理消纳新能源电量&#xff0c;利用粒子群算法思想来求解模型&#xff0c;程序中案例丰富&#…

平价的开放式耳机怎么选?推荐几款平价好用的耳机,亲测对比

是不是也在为如何在有限的预算内找到一款性价比高的开放式耳机而烦恼呢&#xff1f;别着急&#xff0c;小编为你精心挑选了几款平价好用的开放式耳机&#xff0c;并亲自进行了对比测试&#xff0c;在这个音乐时代&#xff0c;不需要花大价钱就能拥有高品质的音乐体验&#xff0…

MacOS 系统 Flutter开发Android 环境配置

上节我们已经把 开发工具准备齐全&#xff0c;并可以进行Flutter的web开发&#xff0c;本节将做安卓开发环境进行详细说明 接上节这里先说下&#xff0c;系统环境 MacOS14 &#xff08;Sonoma&#xff09; 芯片 Apple M3 执行命令&#xff1a;flutter doctor 提示如下&#…