swiper autoheight選項卡嵌套出現空白問題
阿新 • • 發佈：2019-01-09
swiper的autoheight設定可以用來解決tab切換時內容高度不一致而出現的空白問題。今天做專案時，出現了另外的問題，所以整理記錄下。
我的問題是這樣的：用swiper3.1製作了一個tab選項卡（就叫swiper選項卡吧，設定了autoheight），裡面又嵌套了一個jq寫的一般選項卡（叫jq選項卡），jq選項卡內容高度也是不一致的。如果jq選項卡一開始顯示的是高內容的，那麼切換到低內容時，就會出現空白問題；而如果一開始顯示的是低內容的，切換到高內容時，就會有內容被隱藏的問題。
如下：
可以看到在jq選項卡切換到低內容時出現了空白和滾動條，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
<title></title>
<link rel="stylesheet" href="Content/Style/swiper-3.3.1.min.css" />
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
a{text-decoration: none;}
.clearfix:after{visibility:hidden; display: block; font-size: 0; content: ''; clear: both; height: 0;}
.clearfix{*zoom: 1;}
.main-box{max-width: 640px; margin: 0 auto;}
.tab1 a,.tab2 a{float: left; width: 33.333%; height: 40px; line-height: 40px; background: #222; font-size: 18px; color: #fff; text-align: center;}
.tab1 a.active{background: #FF0000;}
.content,.jq-content{background: #007971; height: 800px; font-size: 43px; color: #fff;}
.jq-content{background: #333; height: 600px; }
.tab2 a{width: 50%; background: #ccc;}
.tab2 a.active{background: orange;}
.display{display: none;}
</style>
</head>
<body>
<div class="main-box">
<div class="tab1 clearfix">
<a href="javascript:;" class="active">選項一</a>
<a href="javascript:;">選項二</a>
<a href="javascript:;">選項三</a>
</div>
<div class="swiper-container swiper-tab">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="content">swiper content 高800px</div></div>
<div class="swiper-slide"><div class="content" style="height: 1200px; background: #007AFF;">swiper content 高1200px</div></div>
<div class="swiper-slide">
<div class="tab2 clearfix">
<a href="javascript:;" class="active">jqTab1</a>
<a href="javascript:;">jqTab2</a>
</div>
<div class="jq-content">jq Content 高600px</div>
<div class="jq-content display" style="height: 400px; background: green;">jq Content 高400px</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Script/jquery-1.8.2.min.js" ></script>
<script type="text/javascript" src="Script/swiper-3.3.1.min.js" ></script>
<script>
$(function(){
//swiper tab切換
var tabSwiper = $('.swiper-tab').swiper({
autoHeight: true, //高度隨內容變化
onSlideChangeStart: function(swiper){
$('.tab1 a.active').removeClass('active');
$('.tab1 a').eq(swiper.activeIndex).addClass('active');
//alert(swiper.activeIndex);
}
});
$('.tab1 a').click(function(){
var index = $(this).index();
$('.tab1 a.active').removeClass('active');
$(this).addClass('active');
tabSwiper.slideTo(index,1000,false);
});
var lastIndex = 0;
//jq tab切換
$('.tab2').on('click', "a", function() {
var index = $(this).index();
//alert(index)
$('.tab2 a.active').removeClass('active');
$(this).addClass('active');
$('.jq-content').eq(lastIndex).addClass('display');
$('.jq-content').eq(index).removeClass('display');
lastIndex = index;
})
});
</script>
</body>
</html> 原因找到了，當即聯想能不能在jq選項卡切換的時候都重新設定autoheight呢？所以我直接在jq選項卡那邊加上了tabSwiper.slideTo(2,1000,false)，這句的意思是當jq選項卡切換時我都重新進入下當前頁，這樣就能重新設定autoheight了，果然可以了。
主要程式碼：
$('.tab2').on('click', "a", function() {
var index = $(this).index();
//alert(index)
$('.tab2 a.active').removeClass('active');
$(this).addClass('active');
$('.jq-content').eq(lastIndex).addClass('display');
$('.jq-content').eq(index).removeClass('display');
lastIndex = index;
tabSwiper.slideTo(2,1000,false); //重新進入下當前頁，只要加這句就可以解決了
}) 效果：
目前的解決辦法是這樣，如果你有更好的辦法，歡迎評論交流哈。