swiper autoheight选项卡嵌套出现空白问题

来源：互联网发布：sql联合主键编辑：程序博客网时间：2024/06/06 03:23

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>

出现这种情况的主要原因是：切换到嵌套tab时，此时的autoheight已经设置完了，以jq选项卡的高内容来显示，所以当jq选项卡切换到低内容时就会出现空白。

原因找到了，当即联想能不能在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);//重新进入下当前页，只要加这句就可以解决了      })

效果：

目前的解决办法是这样，如果你有更好的办法，欢迎评论交流哈。

阅读全文

0 0