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

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

<Swiper
  className='index-swiper'
  direction={'vertical'}
  mousewheel={true}
  centeredSlides={true}
  autoHeight={true}
  slidesPerView="auto" // 这里 auto
  observeParents={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.mfbz.cn/a/759513.html

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

相关文章

Servlet_Web小结

1.web开发概述 什么是服务器&#xff1f; 解释一&#xff1a;服务器就是一款软件,可以向其发送请求,服务器会做出一个响应. 可以在服务器中部署文件,让他人访问 解释二&#xff1a;也可以把运行服务器软件的计算机也可以称为服务器。 web开发&#xff1a; 指的是从网页中向后…

C++学习全教程(Day2)

一、数组 在程序中为了处理方便,常常需要把具有相同类型的数据对象按有序的形式排列起来&#xff0c;形成“一组”数据&#xff0c;这就是“数组”(array&#xff09; 数组中的数据&#xff0c;在内存中是连续存放的&#xff0c;每个元素占据相同大小的空间&#xff0c;就像排…

redis实战-添加商户缓存

为什么要使用缓存 言简意赅&#xff1a;速度快&#xff0c;好用缓存数据存储于代码中&#xff0c;而代码运行在内存中&#xff0c;内存的读写性能远高于磁盘&#xff0c;缓存可以大大降低用户访问并发量带来的服务器读写压力实际开发中&#xff0c;企业的数据量&#xff0c;少…

网络编程常见问题

1、TCP状态迁移图 2、TCP三次握手过程 2.1、握手流程 1、TCP服务器进程先创建传输控制块TCB&#xff0c;时刻准备接受客户进程的连接请求&#xff0c;此时服务器就进入了LISTEN&#xff08;监听&#xff09;状态&#xff1b; 2、TCP客户进程也是先创建传输控制块TCB&#xff…

RabbitMq教程【精细版一】

一、引言 模块之间的耦合度过高&#xff0c;导致一个模块宕机后&#xff0c;全部功能都不能用了&#xff0c;并且同步通讯的成本过高&#xff0c;用户体验差。 RabbitMQ引言 二、RabbitMQ介绍 MQ全称为Message Queue&#xff0c;消息队列是应用程序和应用程序之间的通信方法。…

如何利用AI生成可视化图表(统计图、流程图、思维导图……)免代码一键绘制图表

由于目前的AI生成图表工具存在以下几个方面的问题&#xff1a; 大多AI图表平台是纯英文&#xff0c;对国内用户来说不够友好&#xff1b;部分平台在生成图表前仍需选择图表类型、配置项&#xff0c;操作繁琐&#xff1b;他们仍需一份规整的数据表格&#xff0c;需要人为对数据…

碧海威L7云路由无线运营版 confirm.php/jumper.php 命令注入漏洞复现(XVE-2024-15716)

0x01 产品简介 碧海威L7网络设备是 北京智慧云巅科技有限公司下的产品,基于国产化ARM硬件平台,采用软硬一体协同设计方案,释放出产品最大效能,具有高性能,高扩展,产品性能强劲,具备万兆吞吐能力,支持上万用户同时在线等高性能。其采用简单清晰的可视化WEB管理界面,支持…

python序列

列表 与字符串的索引一样&#xff0c;列表索引从 0 开始&#xff0c;第二个索引是 1&#xff0c;依此类推。 通过索引列表可以进行截取、组合等操作 创建一个列表 list [red, green, blue, yellow, white, black]正向取值 print(list[1])反向取值 print(list[-2])更新列…

吉时利 Keithley2601B-PULSE 脉冲数字源表

Keithley2601B-PULSE吉时利脉冲SMU数字源表 无需手动脉冲调整即可实现高脉冲保真度 通过 2601B-PULSE 控制回路系统&#xff0c;高达 3μH 的负载变化无需手动调整&#xff0c;从而确保在任何电流水平&#xff08;最高 10 安培&#xff09;下输出 10 μs 至 500 μs 脉冲时&a…

【火猫】欧洲杯:西班牙老将去卡塔尔淘金,皇马赚麻了

欧洲杯正在如火如荼的进行中&#xff0c;球员的经纪人也在幕后紧罗密布的操作&#xff0c;已经有多位球员将会在新赛季更换门庭。目前正在西班牙国家队征战欧洲杯的老将何塞卢迎来了好消息&#xff0c;根据知名记者罗马诺爆料&#xff0c;何塞卢将会在下赛季加盟卡塔尔球队加拉…

本教程将指导如何通过 Vue 组件和后端 API 交互

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

HarmonyOS开发实战:加密类组件使用方法-API

加密类组件 模块介绍RSA提RSA供生成密钥加解密验签等系列方法(基于HarmonyOS API)AES提供AES生成密钥加解密等系列方法(基于HarmonyOS API)DES提供3DES生成密钥加解密等系列方法(基于HarmonyOS API)SM2提供SM2生成密钥加解密等系列方法(基于HarmonyOS API)SM3提供SM3生成摘要,…

HDFS详细介绍以及HDFS集群环境部署【hadoop组件HDFS笔记】(图片均为学习时截取的)

HDFS详细介绍 HDFS是什么 HDFS是Hadoop三大组件(HDFS、MapReduce、YARN)之一 全称是&#xff1a;Hadoop Distributed File System&#xff08;Hadoop分布式文件系统&#xff09;&#xff1b;是Hadoop技术栈内提供的分布式数据存储解决方案 可以在多台服务器上构建存储集群&…

42.HOOK引擎核心代码

上一个内容&#xff1a;41.HOOK引擎设计原理 以 40.设计HOOK引擎的好处 它的代码为基础进行修改 主要做的是读写寄存器 效果图 添加一个类 htdHook.h文件中的实现 #pragma once class htdHook { public:htdHook(); };htdHook.cpp文件中的实现&#xff1a; #include "…

论文阅读:Simple and Efficient Heterogeneous Graph Neural Network

Yang, Xiaocheng, Mingyu Yan, Shirui Pan, Xiaochun Ye and Dongrui Fan. “Simple and Efficient Heterogeneous Graph Neural Network.” AAAI Conference on Artificial Intelligence (2022). 论文地址&#xff1a;[PDF] Simple and Efficient Heterogeneous Graph Neural…

centos7 xtrabackup mysql 基本测试(5)mysql 建立 测试 数据库及内容

centos7 xtrabackup mysql 基本测试&#xff08;5&#xff09;mysql 建立 测试 数据库及内容 登录 mysql -u etc -p 1234aA~1创建数据库 名字是company show databases ; create database company;在 company里面 创建表employee use company; DROP TABLE IF EXISTS employ…

Webpack: 构建 NPM Library

概述 虽然 Webpack 多数情况下被用于构建 Web 应用&#xff0c;但与 Rollup、Snowpack 等工具类似&#xff0c;Webpack 同样具有完备的构建 NPM 库的能力。与一般场景相比&#xff0c;构建 NPM 库时需要注意&#xff1a; 正确导出模块内容&#xff1b;不要将第三方包打包进产…

C : 线性规划例题求解

Submit Page TestData Time Limit: 1 Sec Memory Limit: 128 Mb Submitted: 93 Solved: 49 Description 求解下述线性规划模型的最优值min &#xfffd;1&#xfffd;1&#xfffd;2&#xfffd;2&#xfffd;3&#xfffd;3&#xfffd;.&#xfffd;. &…

Pbootcms留言“提交成功”的提示语怎么修改

我们在用到pbootcms建站时候&#xff0c;其中有个留言功能&#xff0c;提交成功后会提示&#xff1a;提交成功&#xff08;如下图所示&#xff09;&#xff0c;那么我们要修改这个提示语要怎么操作呢&#xff1f; 如果需要修改的话&#xff0c;直接找到文件/apps/home/control…

完美世界|单机版合集(共22个版本)

前言 我是研究单机的老罗&#xff0c;今天给大家带来的是完美世界的单机版合集&#xff0c;一共22个版本。本人亲自测试了一个版本&#xff0c;运行视频如下&#xff1a; 完美世界|单机版合集 先看所有的版本的文件&#xff0c;文件比较大&#xff0c;准备好空间&#xff0c;差…