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.pswp.cn/diannao/37998.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/37998.shtml
英文地址,請注明出處:http://en.pswp.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;容器技術也是一種資源隔…