首頁(yè) 猿問 swiper.js在內(nèi)容高度小于屏...

swiper.js在內(nèi)容高度小于屏幕高度的時(shí)候設(shè)置autoHeight不好用

JavaScript

四季花海 2018-11-16 14:11:30

使用swiper.js實(shí)現(xiàn)選卡項(xiàng)切換切換但是各個(gè)選卡項(xiàng)的高度是不一樣的數(shù)據(jù)也是異步加載進(jìn)去的為了swiper-container自適應(yīng)高度設(shè)置了autoHeight：true 但是發(fā)現(xiàn)當(dāng)內(nèi)容高度<屏幕高度的時(shí)候這個(gè)屬性就不起作用了通過js設(shè)置改變了但是仍能向下滑動(dòng)空白區(qū)域請(qǐng)問怎么解決

查看完整描述

1 回答

qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

我之前也遇到過這個(gè)問題，因?yàn)閟wiper容器是個(gè)div盒子，所以會(huì)按各個(gè)子tab中高度最大的，作為自己的高度。所以只用css不行哦，要加點(diǎn)js判斷。

解決方法：
1.首先監(jiān)聽tab切換事件的回調(diào)，在tab切換完成以后，獲取當(dāng)前tab內(nèi)容的高度，然后js把外面的swiper容器設(shè)置成當(dāng)前內(nèi)容高度。
2.其次動(dòng)態(tài)內(nèi)容加載完成以后，原理也一樣，也去手動(dòng)獲取內(nèi)容高度，然后設(shè)置外面容器的height為當(dāng)前內(nèi)容高度。

具體代碼不在身邊，可以遲點(diǎn)貼給你，不過思路有了，相信你肯定可以實(shí)現(xiàn)出來的哦！

反對(duì) 回復(fù) 2018-12-07