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.mzph.cn/news/201567.shtml

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

相关文章

基于chatGPT全程辅助的Python教程(逆向教学设计)——使用pyqt5开发

安装 https://zhuanlan.zhihu.com/p/162866700 一些资源推荐 当成手册,现用现场查。 【2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~】 这个优点是用的pycharm ,符合自己习惯 这个控件比较全,可以直接查【PyQt5从入门到…

应用层自定义协议

文章目录 一、前言二、应用层自定义协议三、通用协议格式3.1 xml3.2 josn3.3 protobuffer 后端开发必须掌握的知识点! 一、前言 应用层主要是干嘛的呢?? 应用层协议定义了应用程序之间通信的规则和标准。定义了数据的格式、数据交换的标准和…

第74讲:MySQL数据库InnoDB存储引擎事务:Redo Log与Undo Logo的核心概念

文章目录 1.InnoDB引擎中的逻辑存储结构2.事务的基本概念3.Redo log的核心概念3.1.什么是Redo log3.2.如果没有redo log面临的问题3.3.使用redo log之后是怎样的流程 4.Undo log的核心概念 1.InnoDB引擎中的逻辑存储结构 InnoDB存储引擎的逻辑结构分为以下几层: Ta…

【链表Linked List】力扣-83 删除排序链表中的重复元素

目录 题目描述 解题过程 题目描述 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 示例 1: 输入:head [1,1,2] 输出:[1,2]示例 2: 输入&#xff1…

Python源码17:使用海龟画图turtle画五星红旗

turtle模块是一个Python的标准库之一,它提供了一个基于Turtle graphics的绘图库。Turtle graphics是一种流行的绘图方式,它通过控制一个小海龟在屏幕上移动来绘制图形。 turtle模块可以让您轻松地创建和控制海龟图形,从而帮助您学习Python编…

nginx反向代理到aws S3 ,解决S3返回500、502、503错误

nginx配置如下: location ~ .*\.(js|css|woff|woff2|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|svg|ico|xml|json|map|xhtml|yaml|cur|eot|ttf|mp4|otf|ogg|webp)$ {rewrite ^/(.*) /桶名称/test/static/$1 break;error_page 500 502 503 504…

字符设备驱动基础—并发控制

一、上下文和并发场合 执行流:有开始有结束总体顺序执行的一段代码 又称上下文 应用编程:任务上下文 内核编程: 任务上下文:五状态 可阻塞 a. 应用进程或线程运行在用户空间 b. 应用进程或线程运行在内核空间(通过调…

python基于轻量级卷积神经网络模型ShuffleNetv2开发构建辣椒病虫害图像识别系统

轻量级识别模型在我们前面的博文中已经有过很多实践了,感兴趣的话可以自行移步阅读: 《移动端轻量级模型开发谁更胜一筹,efficientnet、mobilenetv2、mobilenetv3、ghostnet、mnasnet、shufflenetv2驾驶危险行为识别模型对比开发测试》 《基…

HTML5基础知识详讲

什么是网页和网站? ​ 在文章开始之前,我们先了解一下什么是网页和网站 ​ 网页是构成网站的基本元素,它是一个包含HTML标签的纯文本文件,通常是由图片;链接;视频;声音;文字等元素…

你的手机注册了多少互联网账号?赶快通过这个功能查询一下吧!

一键查询手机号绑定!你的手机注册了多少互联网账号?赶快查询一下吧! 你知道你名下的手机号绑定了多少互联网账号吗? 怎么查询手机号绑定了什么账号呢? ...... 不用担心 一键查询手机号绑定的帐号功能来了! …

制造业企业如何建立智能工厂

今天就聊聊企业智能工厂的打造,企业想实现数字化转型建立智能工厂,就需要先建设数字化车间,可以说数字化车间是建设智能工厂的重要一环,智能工厂的基础是数字化车间。数字化车间可以实现企业生产过程中车间计划调度、工艺执行管理…

食品厂ERP有哪几种?食品厂ERP软件哪个操作简单

食品安全问题是近些年备受消费者和企业关注的行业,而食品安全管理涉及原材料、配方、车间、工艺、设备、包装、仓储、保质期等多个方面,因而各个业务部门之间的协同问题就显得颇为重要。 想要提升采购、保质期、库龄分析、财务、订单、原材料、仓储等各…

Pycharm修改文件默认打开方式 + CSV Editor插件使用

1、File —> Settings —> Editor —> File Types 然后将*csv添加到最上面 在plugins中下载插件,CSV Editor 备注:不在上一步的“File Types”中将*.csv设置为CSV格式,插件是不起作用的 就可以使用了

十二、FreeRTOS之FreeRTOS任务相关API函数

本节需要掌握以下内容: 1,FreeRTOS任务相关API函数介绍(熟悉) 2,任务状态查询API函数实验(掌握) 3,任务时间统计API函数实验(掌握) 4,总结 一…

【Docker】从零开始:15.搭建亿级数据Redis集群之哈希算法概念

【Docker】从零开始:15.搭建亿级数据Redis集群之哈希算法概念篇 概述一般业界的3种解决方案1.哈希取余分区优点:缺点: 2.一致性哈希算法分区背景目的原理一致性哈希环节点映射key落到服务器的落键规则 优点容错性扩展性 缺点 3.哈希槽分区背景…

第3节:Vue3 v-bind指令

实例&#xff1a; <template><div><button v-bind:disabled"isButtonDisabled">点击我</button></div> </template><script> import { ref } from vue;export default {setup() {const isButtonDisabled ref(false);ret…

MySQL基本概念和基础语法

指定条件下更新数据 update student a, score b SET b.stuscore 100 WHERE a.stuidb.stuid and a.stuname‘赵雷’ and b.courseid0002 #单表删除 delete from score where stuscore 64 and courseid0001 and stuid0001 多表删除 delete a, b from student as a LEFT J…

家用超声波清洗机哪个牌子好?一起来看、值得推荐超声波清洗机

家用超声波清洗机可以干嘛呢&#xff1f;最常见的就是来清洗眼镜。眼镜党朋友应该经常接触超声波清洗机&#xff0c;它常出现在眼镜店中&#xff0c;眼镜店老板帮顾客清洗眼镜&#xff1b;也会出现在工业领域、医疗领域等&#xff0c;超声波清洗机使用范围还是挺广的&#xff0…

微信小程序 分享的两种方式:菜单级和按钮级

按钮级 在使用微信小程序的时候&#xff0c;我们可能会设计到一些视频的一些分享等&#xff0c;那么视频分享也分为两种方式,例如下图&#xff0c;当我们点击的时候&#xff0c;进行一个转发分享的一个操作 那么在原先代码的基础上&#xff0c;我们需要在原先代码的基础上butt…

Java并行计算实例:使用并发框架解决实际问题

引言&#xff1a; 在当今信息时代&#xff0c;数据的处理速度和效率成为了各行各业的关注焦点。为了提高计算机程序的执行速度&#xff0c;我们需要利用计算机的多核处理能力&#xff0c;实现并行计算。Java作为一门广泛应用于企业级应用开发的编程语言&#xff0c;提供了丰富的…