swiper tab实例

时间 2019-11-18
标签 swiper tab 实例繁體版
原文原文链接
虽然我是个精致的猪猪女孩css
但这个demo写的确实很丑app
只为说明问题！！！忽略样式ide
上代码：oop
<body>
<style type="text/css">
    #swiper-tab .swiper-slide{
        line-height:2 !important;
        color:#666 !important;
        font-size:14px !important;
        background:#eee !important;
    }
    #swiper-tab .active-nav{
        background:red !important;
    }
    #swiper-tab .swiper-slide {
      width: auto;
      cursor: pointer;
    }
    #swiper-tab .swiper-slide > div {
        padding: 0 50px;
    }
    /*tabs文字居中*/
    #swiper-tab{
        text-align: center;
    }
    /*给con部分加上一个背景色*/
    #swiper-con{
        background: yellow;
        height:300px;
    }
</style>

<!--swiper-tab区域-->
<div class="swiper-container swiper-container-horizontal" id="swiper-tab" style="width:480px;">
    <div class="swiper-wrapper">
        <div class="swiper-slide active-nav"><div>版块1</div></div>
        <div class="swiper-slide"><div>版块2</div></div>
        <div class="swiper-slide"><div>版块3</div></div>
        <div class="swiper-slide"><div>版块4</div></div>
        <div class="swiper-slide"><div>版块5</div></div>
        <div class="swiper-slide"><div>版块6</div></div>
        <div class="swiper-slide"><div>版块7</div></div>
        <div class="swiper-slide"><div>版块8</div></div>
        <div class="swiper-slide"><div>版块9</div></div>
    </div>
</div>
<!--swiper-tab区域-->

<!--swiper-con区域-->
<div class="swiper-container swiper-container-horizontal" id="swiper-con" style="width:480px;">
    <div class="swiper-wrapper">
        <div class="swiper-slide blue-slide" style="width: 480px;">slider1</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider2</div>
        <div class="swiper-slide orange-slide" style="width: 480px;">slider3</div>
        <div class="swiper-slide blue-slide" style="width: 480px;">slider4</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider5</div>
        <div class="swiper-slide orange-slide" style="width: 480px;">slider6</div>
        <div class="swiper-slide blue-slide" style="width: 480px;">slider7</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider8</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider9</div>
    </div>
    <div class="swiper-button-next" id="next"></div>
    <div class="swiper-button-prev" id="prev"></div>
</div>
<!--swiper-con区域-->
<script>
    var mySwiper2 = new Swiper('#swiper-tab',{
      
        watchSlidesProgress : true, //开启这个参数来计算每一个slide的progress(进度) 对于slide的progress属性，活动的那个为0，其余的依次减1。例：若是一共有6个slide，活动的是第三个，
                                    // 从第一个到第六个的progress属性分别是：二、一、0、-一、-二、-3。对于swiper的progress属性，活动的slide在最左（上）边时为0，活动的slide在最右（下）边时为1，其余状况平分。例：有6个slide，
                                    // 当活动的是第三个时swiper的progress属性是0.4，当活动的是第五个时swiper的progress属性是0.8。swiper的progress其实就是wrapper的translate值的百分值，与activeIndex等属性不一样，
                                    // progress是随着swiper的切换而不停的变化，而不是在某个时间点突变。
        watchSlidesVisibility : true,//若是开启了watchSlidesVisibility，则会在每一个可见slide增长一个classname，默认为'swiper-slide-visible'
        slidesPerView : 'auto',//将tabs块儿平均分红几份
        preventClicks : false,

        on:{
          click:function(){
            $('#swiper-tab .swiper-slide').removeClass('active-nav')
            $('#swiper-tab .swiper-slide').eq(mySwiper2.clickedIndex).addClass('active-nav');
            //alert(mySwiper2.clickedIndex);
            mySwiper3.slideToLoop(mySwiper2.clickedIndex);
          }
        }
    })
    var mySwiper3 = new Swiper('#swiper-con',{
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
    var prevIndex = 0,
        currentIndex = 0;
    mySwiper3.on('slideChangeTransitionEnd', function () {
        //默认哪一块是被选中的状态
        $('#swiper-tab .swiper-slide').removeClass('active-nav');       //移除全部active-nav
        $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');    //给当前tab加active-nav
        //var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
        var len  = $('#swiper-tab .swiper-slide.swiper-slide-visible').length,      //获取可视区域内标签的个数
            totalWidth = 0,         //定义可视区域内标签个数对应的宽度总和
            tabWidth = $('#swiper-tab').width();        //定义可视区域的宽度
        for(var i = 0; i < len; i++) {
            totalWidth += $('#swiper-tab .swiper-slide.swiper-slide-visible').eq(i).width();        //赋值
        }

        prevIndex = currentIndex;       //把前一个标签的下表赋值给prevIndex
        currentIndex = mySwiper3.activeIndex;   //把当前tab的下表赋值给currentIndex
        if(prevIndex < currentIndex) {   
            mySwiper2.slideNext();
        } else {
            mySwiper2.slidePrev();
        }
    });    
</script>

<!--content-->

</body>
效果以下：spa
该示例针对slidesPerView : 'auto'的状况，slidesPerView 为固定值也是一样的道理！code
有问题请留言哦！blog