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

news2024/11/17 6:40:42

问题描述,如图

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

升辉清洁IPO:广东清洁服务“一哥”还需要讲好全国化的故事

近日,广东物业清洁服务“一哥”升辉清洁第四次冲击IPO成功,拟于12月5日在香港主板挂牌上市。自2021年4月第一次递交招股书,时隔两年半,升辉清洁终于拿到了上市的门票。 天眼查显示,升辉清洁成立于2000年,主…

基于SpringBoot+Vue的前后端分离的房屋租赁系统2

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍: 开发过程中&#xff0…

最强AI之风袭来,你爱了吗?

2017年,柯洁同阿尔法狗人机大战,AlphaGo以3比0大获全胜,一代英才泪洒当场...... 2019年,换脸哥视频“杨幂换朱茵”轰动全网,时至今日AI换脸仍热度只增不减; 2022年,ChatGPT一经发布便轰动全球&a…

聚焦工业生产安全,汉威科技推出最轻最小迷你便携式单气体检测仪

有毒有害气体、可燃气体等是工业生产中常见的危险因素。我国已经出台了多项法律法规、行业标准,在石油、化工、钢铁冶金、危化品、矿业等行业以及有限空间相关场所作业,应当佩戴便携式气体检测仪,以保障作业人员的安全。 然而,近年…

从零开始搭建博客网站-----框架页

实现效果如下 发布的功能还没有实现&#xff0c;仅仅实现了简单的页面显示 关键代码如下 <template><div class"layout"><el-header class"header"><div class"logo">EasyBlog</div></el-header><el-c…

初识动态规划算法(题目加解析)

文章目录 什么是动态规划正文力扣题第 N 个泰波那契数三步问题使用最小花费爬楼梯 总结 什么是动态规划 线性动态规划&#xff1a;是可以用一个dp表来存储内容&#xff0c;并且找到规律存储,按照规律存储。让第i个位置的值等于题目要求的答案 >dp表&#xff1a;dp表就是用一…

Trello软件:从功能、使用技巧到替代软件等,一文弄懂项目管理必备工具!

Trello是什么&#xff1f; Trello是一款基于Web的可视化项目管理工具&#xff0c;它旨在提供一种灵活、易于理解和使用的任务管理系统。Trello将复杂的项目管理流程简化为直观的卡片和列表&#xff0c;使团队成员能轻松看到整个项目的状态&#xff0c;并了解自己的责任和任务。…

【React设计】React企业级设计模式

Image Source : https://bugfender.com React是一个强大的JavaScript库&#xff0c;用于构建用户界面。其基于组件的体系结构和构建可重用组件的能力使其成为许多企业级应用程序的首选。然而&#xff0c;随着应用程序的规模和复杂性的增长&#xff0c;维护和扩展变得更加困难。…

面试官:说说synchronized与ReentrantLock的区别

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…

python pyaudio 录取语音数据

python pyaudio 录取语音数据 pyaudio安装方法&#xff1a; pip install pyaudio如果这个不行&#xff0c;可以尝试&#xff1a; pip install pipwin pipwin install pyaudio代码如下&#xff1a; import pyaudio import waveRESPEAKER_RATE 44100 # 采样率&#xff0c;每…

LoadBalancer将服务暴露到外部实现负载均衡purelb-layer2模式配置介绍

目录 一.purelb简介 1.简介 2.purelb的layer2工作模式特点 二.layer2的配置演示 1.首先准备ipvs和arp配置环境 2.purelb部署开始 &#xff08;1&#xff09;下载purelb-complete.yaml文件并应用 &#xff08;2&#xff09;查看该有的资源是否创建完成并运行 &#xff…

数字化转型浪潮中,施耐德电气如何用技术革新引领未来?

作为一家187年的老牌企业&#xff0c;施耐德电气不仅见证了科技的演进&#xff0c;也是数字化转型潮流中的先行者。在近日的施耐德电气数字化战略暨软件创新沟通会上&#xff0c;施耐德电气全球执行副总裁&#xff0c;首席数字官Peter Weckesser&#xff1b;施耐德电气副总裁、…

MySQL笔记-第03章_基本的SELECT语句

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第03章_基本的SELECT语句1. SQL概述1.1 SQL背景知识1.2 SQL语言排行榜1.3 SQL 分类 2. SQL语言的规则与规范2.1 基本规则2.2 SQL大小写规范 …

PoE技术详解

标准的五类网线有四对双绞线&#xff0c;IEEE 802.3af和IEEE 802.3at允许两种用法&#xff1a;通过空闲线对供电或者数据线对供电。IEEE 802.3bt允许通过空闲线对供电、通过数据线对供电或者空闲线对和数据线对一起供电&#xff0c;如图16.1所示。 图 16.1 PoE供电线对 当在一…

2023年12月4日:多继承

代码 #include <iostream>using namespace std;class Sofa { private:string sit;int *len; public:Sofa(){cout << "Sofa::无参构造函数" << endl;}Sofa(string sit,int len):sit(sit),len(new int(len)){cout << "Sofa::有参构造函数…

力扣124. 二叉树中的最大路径和(java DFS解法)

Problem: 124. 二叉树中的最大路径和 文章目录 题目描述思路解题方法复杂度Code 题目描述 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;且不一定经…

Python流程控制【侯小啾python基础领航计划 系列(十)】

Python流程控制【侯小啾python基础领航计划 系列(十)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

Redis——某马点评day03

全局唯一ID 创建一个工具类 Component public class RedisIdWorker {/*** 开始时间戳*/private static final long BEGIN_TIME_STAMP1672531200L;/*** 序列号的位数*/private static final int COUNT_BITS32;private StringRedisTemplate stringRedisTemplate;public RedisIdW…

判断是否存在重复的数

系列文章目录 进阶的卡莎C_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(C…

2023年哪些行业的offer发的最多?智能制造、AIGC、AI大模型位居前三

口罩过后&#xff0c;职场现状如何&#xff1f;为何211,985毕业生也找不到工作&#xff1f;哪些行业offer多多&#xff1f; 今天我以猎聘大数据《2023届高校毕业生就业数据报告》为基础&#xff0c;带大家一起来看2023年高校毕业生就业形势。热门行业岗位、18个新赛道机会、就业…