用swiper实现tabs切换并且实现他tabs底下内容自适应

用swiper 实现tabs切换并且实现他tabs底下内容自适应

在swiper 插件中，‘.swiper-container’,’.swiper-wrapper’,’swiper-slide’ 的高度会根据内容的最高高度进行设置，使得tabs的高度不能根据自己的高度而自适应。
我的解决方式：
在‘swiper-slide’里面
1.添加一个p.content_p,
2.将 .swiper-slide 里面的padding和margin 都设置为0，在.content_p里面设置相应的margin和padding
3.把当前的p.content_p的高度赋值给‘.swiper-slide’，‘.swiper-container’,’.swiper-wrapper’

html:如下所示
 

<p class="maple-tab clearFix">
    <ul>
        <li class="active"><p class="m-border-right">订单状态</p></li>
        <li><p>订单详情</p></li>
    </ul>
</p>
<!--列表内容-->
<p class="swiper-container" style="">
    <p class="swiper-wrapper" style="">
        <p class="swiper-slide tab-content-1">
            <p class="content_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><p>erwrew</p>
            </p>
        </p>
        <p class="swiper-slide tab-content-2">
            <p class="content_p">
                <p>列表2内容</p>
                <p>dfjkh 好的仓库供货电饭锅尽快发货的金凤凰开关灵活的风格和人工等方面，vhnjyhrgu</p>
                <img src="dist/images/timg.jpg" class="images" alt="">
            </p>
        </p>
    </p>
</p>

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_p").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_p").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>