swiper高度自適應問題

2021-10-17 03:24:31 字數 612 閱讀 9191

一、問題原因

swiper內每項的列表資料是不固定的,當乙個swiper-slide內容過多將swiper高度撐大,因swiper是乙個切換內容顯示的容器,容器會按照最大的高度展示,導致資料量少的swiper-slide項依然可以向下滑動。(嘗試使用swiper的autoheight:true,swiper的初始化高度預設讀取swiper-slide的offsetheight,**中實際獲取的offsetheight為乙個item的高度,導致顯示有誤)

二、解決方法

1、在swiper元件監聽每一項swiper-slide的高度,當切換swiper時,獲取swiper-slide的高度,將這個高度賦值給swiper,進而實現swiper的高度自適應。

2、重要**羅列:     

swiper監聽**

swiper-slide中監聽當前項的高度,反饋給swiper

swiper頁面高度自適應

使用 swiper外掛程式,根據後台請求回來的資料,遍歷產生slide,某乙個slide沒有內容,高度等同其他頁面高度,上下滑動時有大量留白 刪除 swiper外掛程式的autoheight true屬性,將外層的swiper container高度設定為100 給swiper slide設定ove...

解決swiper的自適應高度問題

最近在寫專案中用到swiper做標籤頁切換,因每個標籤頁的內容不一樣,所以需要自適應高度,根絕官方api在swiper中新增 autoheight true 但是並沒有什麼卵用,是ajax的原因還是我自定義個一些樣式覆蓋掉了swiper.css中的某些樣式這個我沒有去研究。期間也試過了像 overf...

高度自適應問題

本文和大家重點討論一下如何控制div最小高度又div自適高度問題,如果我們需要設定乙個div高度,當裡面的東西超過這個高度時,讓這個容器自動被撐開,也就是div自適應高度。當裡面的資訊很少時候,我們就設定它乙個最小的固定高度。如何控制div最小高度又div自適高度 我們在用div布局的時候經常會遇到...