react 中 Swiper vertical 模式下 autoHeight 失效的问题

Swiper 在 vertical 模式下 autoHeight 失效的问题,导致页面出现多余的空白高度,网上找了很多方法都无效,我直接暴力更改。

<SwiperclassName='index-swiper'direction={'vertical'}mousewheel={true}centeredSlides={true}autoHeight={true}slidesPerView="auto" // 这里 autoobserveParents={true}observer={true}modules={[Mousewheel]}onSlideChange={(swiper) => {if(swiper.activeIndex == 5) { // 我的item有6条,取最后有问题的一条const dom = document.getElementsByClassName('swiper-wrapper')[0]; // 获取到 transform 的元素const y = (swiper.height - (swiper as any).slidesSizesGrid[swiper.activeIndex]) / 2 + 'px'; // 具体 translate 数值根据计算出来的结果而定。(dom as any).style.transform += `translateY(${y})` // 暴力更改}}}
><SwiperSlide><Video></Video></SwiperSlide><SwiperSlide><ModelDisplay></ModelDisplay></SwiperSlide><SwiperSlide><Introduction></Introduction></SwiperSlide><SwiperSlide><Appointment></Appointment></SwiperSlide><SwiperSlide><ServiceSupport></ServiceSupport></SwiperSlide><SwiperSlide><Footer></Footer></SwiperSlide>
</Swiper>

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

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

相关文章

VS2019+QT5.12.10: error MSB4036: 未找到“Join”任务。请检查下列各项: 1.) 项目文件中的任务名

1、背景 两个VS2019打开两个相同的项目&#xff0c;一个里可以正常运行&#xff0c; 一个中一直报错&#xff0c;&#xff0c;报的错也是瞎几把报的。。 2、重新安装插件 之前在VS的扩展中在线安装了qt插件&#xff0c; 安装了一半&#xff0c;比较慢&#xff0c;直接强行退出…

传媒行业指哪些?需要过等保吗?

传媒&#xff0c;一个人人都接触的行业。相信大家都听过传媒&#xff0c;但具体传媒行业是指什么&#xff0c;包括哪些&#xff0c;详细很多人都不了解。这不一些人在问&#xff0c;传媒行业指哪些&#xff1f;需要过等保吗&#xff1f;这里跟我们小编一起来讨论讨论吧&#xf…

玩游戏就能学习亚马逊云科技AWS技术并通过热门技术认证考试??

亚马逊AWS限时活动&#xff0c;玩免费游戏Cloud Quest Practitioner送AWS云从业证书考试25%折扣券(价值171元)&#xff0c;玩游戏的同时还能学知识一举两得。Cloud Quest是AWS出的一款3D角色扮演游戏/虚拟城市建造形式的实验课程(游戏画面有点像天际线)&#xff0c;大家通过完成…

【01-02】Mybatis的配置文件与基于XML的使用

1、引入日志 在这里我们引入SLF4J的日志门面&#xff0c;使用logback的具体日志实现&#xff1b;引入相关依赖&#xff1a; <!--日志的依赖--><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version&g…

338. 比特位计数(leetcode)

338. 比特位计数&#xff08;leetcode&#xff09; 题目描述 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 示例1 输入&#xff1a;n 2 输出&#xff1a;[0…

Sorting

本节提供有关在数据网格中对数据进行排序的信息。 GridControl-Grid View Sort Data 默认情况下&#xff0c;最终用户可以按任何列对数据进行排序&#xff0c;但使用MemoExEdit、ImageEdit和PictureEdit在位编辑器的列除外。在运行时&#xff0c;单击列标题一次以升序排列数…

中国电信股份有限公司江西分公司招聘信息 7.5日截止

法律事务管理(南昌) 学历要求 本科及以上学历 岗位职责 1.依据国家法律、法规和相关规章规定,为公司其他部门提供日常法律服务与支持; 2.负责公司各类合同审核工作; 3.负责公司法律文件的起草和法律事务谈判; 4.围绕与公司业务有关的法律问题及法…

如何在Java中实现分布式缓存?

如何在Java中实现分布式缓存&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨在Java应用程序中如何实现分布式缓存&#xff0c;探…

【SQL注入】

SQL注入&#xff1a;通过可输入/修改sql参数实现攻击的过程 文章目录 0x00 SQL注入漏洞原理0x01 前置知识1 SQL注入分类2 数据库知识 0x02 是否存在SQL注入&#xff1f;0x03 不同SQL注入1. Union注入2. 盲注Blind3. base64注入 0x04 SQL注入绕过技术0x05 SQL防注入 0x00 SQL注入…

网络爬虫的应用场景

网络爬虫的应用场景 网络爬虫的应用场景在现代信息化社会中显得尤为广泛和重要。除了我们熟知的搜索引擎利用爬虫技术抓取互联网上的信息以提供用户搜索服务外&#xff0c;还有许多其他领域也依赖于网络爬虫的高效运作。 在电商领域&#xff0c;网络爬虫被广泛应用于价格监控…

最强文生图模型Stable Diffusion 3 Medium 正式开源

Stability AI 宣布 Stable Diffusion 3 Medium 现已开源&#xff0c;是 Stable Diffusion 3 系列中最新、最先进的文本生成图像 AI 模型 —— 官方声称是 “迄今为止最先进的开源模型”&#xff0c;其性能甚至超过了 Midjourney 6。 Stable Diffusion 3 Medium 模型规格参数达到…

获取 url 地址栏 ? 后面的查询字符串,并以键值对形式放到对象里面

写在前面 在前端面试当中&#xff0c;关于 url 相关的问题很常见&#xff0c;而对于 url 请求参数的问题也很常见&#xff0c;大部分以笔试题常见&#xff0c;今天就根据这道面试题一起来看一下。 问题 获取 url 地址栏?后面的查询字符串&#xff0c;并以键值对形式放到对象…

[分布式网络通讯框架]----MprpcController以及Logger类

在calluserservice.cc中&#xff0c;使用UserServiceRpc_Stub类的时候&#xff0c;我们最终调用形式为&#xff1a;stub.Login(&controller,&request,&response,nullptr); 注意到其中有一个controller对象&#xff0c;这个是由MprpcController类定义出来的对象&…

LLVM AliasAnalysis别名分析 TBAA TypeBasedAliasAnalysis

一、什么是别名分析 Alias Analysis (又名 Pointer Analysis)是用于确定两个指针是否指向内存中的同一对象&#xff0c;这里有很多不同的别名分析算法&#xff0c;分为几种类型&#xff1a;流敏感vs流非敏感、上下文敏感vs上下文非敏感、域敏感vs域非敏感、基于一致性的vs基于…

单片机学习(16)--直流电机驱动

直流电机驱动 15.1直流电机驱动基础知识1.直流电机介绍2.电机驱动电路3.PWM介绍 15.2LED呼吸灯和直流电机调速1.LED呼吸灯代码2.直流电机调速&#xff08;1&#xff09;产生PWM的方法&#xff08;2&#xff09;工程目录&#xff08;3&#xff09;main.c函数 15.1直流电机驱动基…

isdecimal()方法——判断字符串是否只包含十进制字符

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 isdecimal()方法用于检查字符串是否只包含十进制字符。这种方法只适用于unicode对象。 注意&#xff1a;定义一个十进制字符串&#xff0c…

linux高级编程(进程)(2)

父子进程的关系&#xff1a; 子进程是父进程的副本。子进程获得父进程数据段&#xff0c;堆&#xff0c;栈&#xff0c;正文段共享。&#xff08;子分配了一块新的内存&#xff0c;但是代码段指向父进程&#xff0c;也就是说不论几个子进程都只有一个code段&#xff09; …

SpringCloud中复制模块然后粘贴,文件图标缺少蓝色方块

再maven中点击&#xff0b;号&#xff0c;把当前pom文件交给maven管理即可

RabbitMq的基础及springAmqp的使用

RabbitMq 官网:RabbitMQ: One broker to queue them all | RabbitMQ 什么是MQ&#xff1f; mq就是消息队列&#xff0c;消息队列遵循这先入先出原则。一般用来解决应用解耦&#xff0c;异步消息&#xff0c;流量削峰等问题&#xff0c;实现高性能&#xff0c;高可用&#xf…

容器技术-docker2

容器化技术Docker Docker介绍 官网&#xff1a; docker.io docker.com 公司名称&#xff1a;原名dotCloud 14年改名为docker 容器产品&#xff1a;docker 16年已经被更名为Moby docker-hub docker.io docker容器历史 和虚拟机一样&#xff0c;容器技术也是一种资源隔…