基於swiper的Tab選項卡

月影發表於2019-02-16

選項卡五花八門，今天又要用到選項卡，首選swiper！

一、HTML佈局

根據swiper官網的要求來class命名滑塊。

<div class="box">
    <ul class="swiperTab">
        <li> <span>Div+CSS</span> </li>
        <li> <span>JavaScript+JQuery</span> </li>
        <li> <span>AngularJS+Vue+NodeJs</span> </li>
    </ul>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">千尋Div+CSS</div>
            <div class="swiper-slide">阿飛JavaScript+JQuery</div>
            <div class="swiper-slide">無慮AngularJS+Vue+NodeJs</div>
        </div>
    </div>
</div>

二、CSS樣式

隨便寫寫，根據使用場景調整。（PS：推薦一個線上美化工具）

*{margin:0;padding:0}
li{list-style:none}
.box{margin:50px auto;width:800px}
.swiperTab{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}
.swiperTab li{display:flex;height:48px;border-left:1px solid #dfdfdf;background-color:#ddf8ff;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center}
.swiperTab li:first-child{border-left:1px solid transparent}
.swiperTab li.active{background-color:#f60;color:#fff}
.swiperTab li:nth-child(1).active{background-color:#9acd32}
.swiperTab li:nth-child(2).active{background-color:green}
.swiperTab li:nth-child(3).active{background-color:pink}
.swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}
.swiper-slide:nth-child(1){height:200px;background-color:#9acd32}
.swiper-slide:nth-child(2){height:300px;background-color:green}
.swiper-slide:nth-child(3){height:100px;background-color:pink}

三、Js封裝

自己封裝的選項卡函式swiperTab.js

/*  swiper 選項卡函式 引數說明
*       obj  必選，導航列表
*       swiperObj: 必選，HTML元素或者string型別，Swiper容器的css選擇器
*       className: 必選，當前樣式的類名
*       effect：可選，切換效果，預設為"slide"，可設定為"fade，cube，coverflow，flip"。
*       其他引數參閱官網 http://www.swiper.com.cn
* */
function tabs(obj,swiperObj,className) {
    var tabSwiper = new Swiper(swiperObj, {
        effect : `flip`,//切換效果
        speed : 500, //滑動速度，單位ms
        autoHeight: true, // 高度隨內容變化
        onSlideChangeStart : function() {
            $(obj+"."+className).removeClass(className); /*有當前類名的刪除類名,給下一個新增當前類名*/
            $(obj).eq(tabSwiper.activeIndex).addClass(className);/*activeIndex是過渡後的slide索引*/
        }
    });
    // 模擬點選事件，如果是移入事件，將mousedown 改為 mouseenter
    $(obj).on(`touchstart mousedown`, function(e) {
        e.preventDefault();/*清除預設事件*/
        $(obj+"."+className).removeClass(className);
        $(this).addClass(className); /*點選當前導航 改變當前樣式*/
        tabSwiper.slideTo($(this).index());/*滑動到對應的滑塊*/
    });
    $(obj).click(function(e) {
        e.preventDefault();/*清除預設點選事件*/
    });
}

四、Js呼叫

首先引入相關js

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script src="js/swiperTab.js"></script>
<script>
    /*swiper選項卡切換*/
    $(function () {
      //swiperTab 是你導航的className,active是你當前狀態的className
        $(`.swiperTab > li`).eq(0).addClass(`active`);
        tabs(`.swiperTab > li`,`.swiper-container`,`active`);
    });
</script>

前端小白剛學JS。不足之處，不吝言賜教。謝謝！

五、擴充

經常遇到從另一個頁面直接跳轉到選項卡對應的內容

例如：page.html 中點選a標籤直接跳轉到對應展示頁面。
我們在href中直接新增錨點，錨點中包含一個數字即對應選項卡的索引值0、1、2

<a href="SwiperPC.html#slider0"  target="_blank">展示 Div+CSS</a>
<a href="SwiperPC.html#slider1"  target="_blank">展示 JavaScript+JQuery</a>
<a href="SwiperPC.html#slider2"  target="_blank">展示 ngularJS+Vue+NodeJs</a>

對上面的案例稍作修改：

  1. 在swiperTab.js中新增設定初始化時slide的索引 initialSlide: index
  2. 傳入引數 index

  3. 在回撥函式中 判斷tabSwiper是否存在，否則當雜湊值不為0的時候會報錯 。

    function tabs(obj,swiperObj,className,index) {
    var tabSwiper = new Swiper(swiperObj, {
        initialSlide: index, // 設定初始化時slide的索引
        effect : `flip`, 
        speed : 500,  
        autoHeight: true,  
        onSlideChangeStart : function() {
            if(tabSwiper){ 
            /*判斷tabSwiper是否存在，否則當雜湊值不為0的時候會報錯 */
                $(obj+"."+className).removeClass(className);  
                $(obj).eq(tabSwiper.activeIndex).addClass(className); 
            }
        }
    });
    $(obj).on(`touchstart mousedown`, function(e) {
        e.preventDefault(); 
        $(obj+"."+className).removeClass(className);
        $(this).addClass(className);  
        tabSwiper.slideTo($(this).index()); 
    });
    $(obj).click(function(e) {
        e.preventDefault(); 
    });
}

  4. 在呼叫的時候 根據雜湊值(因為我們在a標籤的href中新增了錨點)來改變索引值index從而達到改變 swiper初始化時slide的索引的目的

    <script>
    $(function () {
        var $tabList =  $(`.swiperTab > li`),
        lens= $tabList.length; /*獲取選項卡長度*/
        var index = 0; /*設定初始索引為0  即 沒有雜湊值的時候顯示第一個選項卡內容*/
        var hash = window.location.hash;
        /* *
        * 獲取雜湊值（你也可以獲取整個url剪下出你要的欄位）。根據雜湊值中設定的數字顯示對應的選項卡內容；
        * 例如：SwiperPC.html#slide1對應顯示第索引值為1的選項卡內容即第二個選項卡
        if(hash){
            value = hash.match(/d/g).join(``);
            index = Number(value);/*字串轉換為數字*/
            index = parseInt(index)%lens;
        }
        $tabList.eq(index).addClass(`active`);
        tabs(`.swiperTab > li`,`.swiper-container`,`active`,index);
    });
</script>
```

完整案例
延伸閱讀我的另一篇用本地儲存 方式 從一個頁面跳轉到用swiper寫的全屏滾動頁面的指定位置

相關文章