本文主要是介绍用swiper 实现tabs切换并且实现他tabs底下内容自适应，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
用swiper 实现tabs切换并且实现他tabs底下内容自适应
在swiper 插件中，‘.swiper-container’,’.swiper-wrapper’,’swiper-slide’ 的高度会根据内容的最高高度进行设置，使得tabs的高度不能根据自己的高度而自适应。
我的解决方式：
在‘swiper-slide’里面
1.添加一个div.content_div,
2.将 .swiper-slide 里面的padding和margin 都设置为0，在.content_div里面设置相应的margin和padding
3.把当前的div.content_div的高度赋值给‘.swiper-slide’，‘.swiper-container’,’.swiper-wrapper’
html:如下所示
<div class="maple-tab clearFix"><ul><li class="active"><p class="m-border-right">订单状态</p></li><li><p>订单详情</p></li></ul>
</div>
<!--列表内容-->
<div class="swiper-container" style=""><div class="swiper-wrapper" style=""><div class="swiper-slide tab-content-1"><div class="content_div"><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p></div></div><div class="swiper-slide tab-content-2"><div class="content_div"><p>列表2内容</p><p>dfjkh 好的仓库供货电饭锅尽快发货的金凤凰开关灵活的风格和人工等方面，vhnjyhrgu</p><img src="dist/images/timg.jpg" class="images" alt=""></div></div></div>
</div>js 如下所示:
<script src="dist/js/jquery.js"></script>
<script src="dist/js/swiper.min.js"></script>
<script>$(function () {var mySwiper = new Swiper('.swiper-container', {onSlideChangeEnd: function (swiper) {var j = mySwiper.activeIndex;$('.maple-tab li').removeClass('active').eq(j).addClass('active');var content_height = $(".content_div").eq(j).height();var slide_height = $(".swiper-slide").eq(j).height(content_height);$(".swiper-wrapper").css("height", content_height);$(".swiper-container").css("height", content_height);}})/*列表切换*/$('.maple-tab li').on('click', function (e) {e.preventDefault();//得到当前索引var i = $(this).index();$('.maple-tab li').removeClass('active').eq(i).addClass('active');var content_height = $(".content_div").eq(i).height();var slide_height = $(".swiper-slide").eq(i).height(content_height);$(".swiper-wrapper").css("height", content_height);$(".swiper-container").css("height", content_height);mySwiper.slideTo(i, 1000, false);});});
</script>这篇关于用swiper 实现tabs切换并且实现他tabs底下内容自适应的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
