javascript - swiper.js在內容高度小於螢幕高度的時候設定autoHeight不好用
phpcn_u1582
phpcn_u1582 2017-05-19 10:43:35
0
1
605

使用swiper.js實作選卡項切換切換但是各個選卡項目的高度是不一樣的資料也是異步載入進去的
為了swiper-container自適應高度設定了autoHeight:true 但是發現當內容高度<螢幕高度的時候這個屬性就不起作用了
透過js設定改變了但是仍能向下滑動空白區域請問怎麼解決

phpcn_u1582
phpcn_u1582

全部回覆(1)
小葫芦

我之前也遇到過這個問題,因為swiper容器是個p盒子,所以會按各個子tab中高度最大的,作為自己的高度。所以只用css不行哦,要加點js判斷。

解決方法:
1.先監聽tab切換事件的回調,在tab切換完成以後,取得目前tab內容的高度,然後js把外面的swiper容器設定成目前內容高度。
2.其次動態內容載入完成以後,原理也一樣,也去手動取得內容高度,然後設定外面容器的height為目前內容高度。

具體程式碼不在身邊,可以遲點貼給你,不過思路有了,相信你一定可以實現出來的哦!

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板