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

news2024/11/17 11:37:36

问题描述,如图

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

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

相关文章

AI堆栈之战正在升温

原创 | 文 BFT机器人 从OpenAI和微软最近的现状可以看出,争夺更多新兴AI堆栈的竞争正在加剧。AI堆栈是用于开发和部署AI应用程序的技术、框架和工具的集合,通常包括多个层或组件。 在微软Ignite会议和OpenAI首届DevDay大会的背景下,一些行业…

福德植保无人机:农业科技的新篇章

一、引言随着科技的不断发展,无人机技术在许多领域中都得到了广泛的应用。近年来,福德植保无人机在农业领域大放异彩,成为了现代化农业的重要一环。本篇文章将为您详细介绍福德植保无人机的优势、特点以及未来发展趋势。 二、福德植保无人机的…

分油问题C++求解

原题 3个油桶&#xff0c;容量分别为&#xff08;大桶&#xff09;20&#xff0c;&#xff08;中桶&#xff09;9&#xff0c;&#xff08;小桶&#xff09;7&#xff0c;初始时大桶满油&#xff0c;如何操作可以分出17的油&#xff1f; 代码 #include<iostream> #inc…

Unity中Shader编译目标级别

文章目录 前言一、Shader Model二、Shader编译目标级别法1&#xff1a; #pragma target 3.0法2&#xff1a;#pragma require integers geometry 三、测试代码 前言 针对不同平台的特性&#xff0c;所做的一些功能 一、Shader Model ShaderModel 由微软提出&#xff0c;要求显…

【LeetCode】栈和队列OJ题---C语言版

栈和队列OJ题 1.括号匹配问题&#xff08;1&#xff09;题目描述&#xff1a;&#xff08;2&#xff09;思路表述&#xff1a;&#xff08;3&#xff09;代码实现&#xff1a; 2.用队列实现栈&#xff08;1&#xff09;题目描述&#xff1a;&#xff08;2&#xff09;思路表述&…

java double类型保留两位小数并去除后面多余的0

public static void main(String[] args) {double value9.100001;//保留两位小数String format String.format("%.2f", value);//去除多余的0String strValue new BigDecimal(format).stripTrailingZeros().toPlainString();System.out.println("strValue &q…

三维模型重建中地面控制点刺点输入常见问题及解决方法

三维模型重建中地面控制点刺点输入常见问题及解决方法 在倾斜摄影三维模型重建中&#xff0c;地面控制点的人工刺点输入是一个重要的环节。然而&#xff0c;这个过程可能会遇到一些常见问题。以下是一些常见问题及相应的解决方法&#xff1a; 1、问题&#xff1a;标定点位置不…

48、Flink DataStream API 编程指南(1)- DataStream 入门示例

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

webpack优化打包速度

webpack打包速度太慢 优化 1.多线程打包 js压缩和loader 2.优化启动速度 hard-source-webpack-plugin 3.删除无用的 分析类插件 4.DllPlugin通道打包 1.webpack多线程打包 loader loader 使用 thread-loader 将他放置你要使用的loader前面就行&#xff0c;不过这个lorder例如s…

第二证券:股票几点到几点开盘?

作为股民或许投资者&#xff0c;我们都知道股票是每天都有开盘和收盘时间的。但是&#xff0c;关于股票的开盘时间&#xff0c;很多人并不是很清楚&#xff0c;特别是初学者。在本文中&#xff0c;我们将从多个视点分析股票开盘时间&#xff0c;并为大家供给一些有用的信息。 …

Pytorch从零开始实战11

Pytorch从零开始实战——ResNet-50V2算法实战 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——ResNet-50V2算法实战环境准备数据集模型选择开始训练可视化总结 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#xff0c;Pyt…

Thread的基础用法

作者简介&#xff1a; zoro-1&#xff0c;目前大二&#xff0c;正在学习Java&#xff0c;数据结构&#xff0c;mysql&#xff0c;数据结构&#xff0c;javaee等 作者主页&#xff1a; zoro-1的主页 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&…

竞赛云平台助力华东空管局远程知识竞赛

民航华东空管局“安康杯”第三届机关综合管理能力大赛采取远程线上方式进行&#xff0c;所有选手均不在同一个地方&#xff0c;不仅节省了成本&#xff0c;同时也大大简化了赛事组织工作。借助“赛易”这样的线上知识竞赛云平台&#xff0c;其实线上竞赛可以办得象线下一样高端…

Linux学习笔记 CenOS6.3 yum No package xxx available

环境CenOS [roothncuc ~]# cat /etc/issue CentOS release 6.2 (Final) Kernel \r on an \m安装gcc的时候提示没有包 [roothncuc ~]# sudo yum install gcc gcc-c libstdc-devel Loaded plugins: refresh-packagekit, security Setting up Install Process No package gcc a…

《PFL》论文阅读笔记

一、概要 随着联邦学习的发展&#xff0c;简单的聚合算法已经不在有效。但复杂的聚合算法使得联邦学习训练时间出现新的瓶颈。本文提出了并行联邦学习&#xff08;parallel federated learning&#xff0c;PFL&#xff09;&#xff0c;通过调换中心节点聚合和广播的顺序。本文…

行业研究:2023年氟化钾发展前景及细分市场分析

氟化工产品&#xff0c;作为化工新材料之一&#xff0c;在“十二五”规划被单列一个专项规划。由于产品具有高性能、高附加值&#xff0c;氟化 工产业被称为黄金产业。 氟是一种盐&#xff0c;有一种叫做钾的腐化盐&#xff0c;这种产品是白色结晶&#xff0c;易吸收&#xff0…

基于Springboot的房产销售系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的房产销售系统(有报告)。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring Sp…

飞书全新版本搭载AI智能伙伴,支持用户自选底层大模型!

原创 | 文 BFT机器人 近日&#xff0c;字节跳动旗下飞书正式发布“飞书智能伙伴”系列AI产品。此次新产品有专属、易协作、有知识、有记忆、更主动等特点。除此之外&#xff0c;“飞书智能伙伴”作为一个开放的AI服务框架&#xff0c;各企业可根据业务场景自主选择适合的底层大…

图扑软件受邀出席高交会-全球清洁能源创新博览会

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

从0开始学习JavaScript--JavaScript 工厂模式

JavaScript 工厂模式是一种强大的设计模式&#xff0c;它提供了一种灵活的方式来创建对象。本文将深入讨论工厂模式的基本概念、多种实现方式以及在实际应用中的各种场景。 工厂模式的基本概念 工厂模式旨在通过一个函数或方法来创建对象&#xff0c;而不是通过类直接实例化。…