JS實用功能-2、Swiper 自定義分頁器 並實現多個用省略號顯示

在實際開發中，使用Swiper滾動頁，常常也會用到它內置強大的分頁器，但是，如果出現Swiper-slide數據較多，比如20條以上的時候，如果再強制使用它本身內置的分頁器，那就顯得太密密麻麻了

所以，像是平常中，遇到多頁內容，一般都會進行分頁處理，而分頁器內容太多的話就會用省略號處理，比如下面這種樣子：

 

在使用Swiper時也不例外。

先看一下實現的效果圖吧：

css寫得有點簡陋，不過這不重要，看代碼就好了。

首先把Swiper部分搞定，這部分簡單，省略可以嗎？當然不可以：O(∩_∩)O哈哈~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>swiper分頁</title>
    <link rel="stylesheet" href="./css庫/swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 375px;
        }
        .item{
            box-sizing: border-box;
            width: 96%;
            height: 150px;
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="content swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide item">
            1
        </div>
        <div class="swiper-slide item">
            2
        </div>
        <div class="swiper-slide item">
            3
        </div>
        <div class="swiper-slide item">
            4
        </div>
        <div class="swiper-slide item">
            5
        </div>
        <div class="swiper-slide item">
            6
        </div>
        <div class="swiper-slide item">
            7
        </div>
        <div class="swiper-slide item">
            8
        </div>
        <div class="swiper-slide item">
            9
        </div>
        <div class="swiper-slide item">
            10
        </div>
        <div class="swiper-slide item">
            11
        </div>
        <div class="swiper-slide item">
            12
        </div>
        <div class="swiper-slide item">
            13
        </div>
        <div class="swiper-slide item">
            14
        </div>
        <div class="swiper-slide item">
            15
        </div>
    </div>
</div>
</body>
<script src="./JS庫/swiper.min.js"></script>
<script>
    const mySwiper = new Swiper('.swiper-container',{
        autoplay: false,
        /*slidesPerView: "auto",*/
        on: {
            slideChangeTransitionEnd: function () {
                console.log(this.activeIndex);
            }
        }
    });
</script>
</html>

一個簡單的Swiper滾動頁就做好了，其中on中的slideChangeTransitionEnd方法是監聽滑動Swiper-slide結束之后執行的方法，比如我現在需要打印當前滑動到的item。這個方法對后面大有用處

那么下一步當然是寫一個強大的分頁器了：

var ms = {
    init: function(obj, args) {
        return (function() {
            ms.fillHtml(obj, args);
            ms.bindEvent(obj, args);
        })();
    },
    fillHtml: function(obj, args) {
        return (function() {
            obj.empty();
            if (args.current > 1) {
                obj.append('<a href="javascript:;" class="prevPage">上</a>');
            } else {
                obj.remove('.prevPage');
                obj.append('<span class="disabled">上</span>');
            }
            if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
                obj.append('<a href="javascript:;" class="tcdNumber">' + 1 + '</a>');
            }
            if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
                obj.append('<span>...</span>');
            }
            var start = args.current - 2,
                end = args.current + 2;
            if ((start > 1 && args.current < 4) || args.current == 1) {
                end++;
            }
            if (args.current > args.pageCount - 4 && args.current >= args.pageCount) {
                start--;
            }
            for (; start <= end; start++) {
                if (start <= args.pageCount && start >= 1) {
                    if (start != args.current) {
                        obj.append('<a href="javascript:;" class="tcdNumber">' + start + '</a>');
                    } else {
                        obj.append('<span class="current">' + start + '</span>');
                    }
                }
            }
            if (args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5) {
                obj.append('<span>...</span>');
            }
            if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
                obj.append('<a href="javascript:;" class="tcdNumber">' + args.pageCount + '</a>');
            }
            if (args.current < args.pageCount) {
                obj.append('<a href="javascript:;" class="nextPage">下</a>');
            } else {
                obj.remove('.nextPage');
                obj.append('<span class="disabled">下</span>');
            }
            obj.append('<span class="pagecount">共' + args.pageCount + '頁</span>');
            if (args.turndown == 'true') {
                obj.append('<span class="countYe">到第<input type="text" maxlength=' + args.pageCount.toString().length + '>頁<a href="javascript:;" class="turndown">確定</a><span>');
            }
        })();
    },
    bindEvent: function(obj, args) {
        return (function() {
            obj.on("click", "a.tcdNumber",
                function() {
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj, {
                        "current": current,
                        "pageCount": args.pageCount,
                        "turndown": args.turndown
                    });
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current);
                    }
                });
            obj.on("click", "a.prevPage",
                function() {
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj, {
                        "current": current - 1,
                        "pageCount": args.pageCount,
                        "turndown": args.turndown
                    });
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current - 1);
                    }
                });
            obj.on("click", "a.nextPage",
                function() {
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj, {
                        "current": current + 1,
                        "pageCount": args.pageCount,
                        "turndown": args.turndown
                    });
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current + 1);
                    }
                });
            obj.on("click", "a.turndown",
                function() {
                    var page = $("span.countYe input").val();
                    if (page > args.pageCount) {
                        alert("您的輸入有誤，請重新輸入！");
                    }
                    ms.fillHtml(obj, {
                        "current": page,
                        "pageCount": args.pageCount,
                        "turndown": args.turndown
                    });
                });
        })();
    }
}

簡單說一下：init方法，應該都能看明白了，初始化並執行兩個函數。

fillHTML是自動填充分頁器節點，里面有一堆的樣式判斷，就不一一解釋了，有空的朋友可以研究一下。

bindEvent是綁定里面的點擊方法，這里面利用了閉包函數，使得在for循環注冊點擊事件的時候，讓每個方法都能執行到相應的部分。（不懂閉包的可以自行把百度）

寫好上面之后，下一步，用jQuery原型聲明一個函數

$.fn.createPage = function(options) {
    var args = $.extend({
            pageCount: 10,
            current: 1,
            turndown: true,
            backFn: function() {}
        },
        options);
    ms.init(this, args);
}

然后就大功告成了。

在上面的HTML那里聲明一個分頁器盒，最好在content后面添加。

<div class="pagesDiv">

</div>

然后呢，就是引用這個方法了，記得引用JQuery插件。

const mySwiper = new Swiper('.swiper-container',{
        autoplay: false,
        /*slidesPerView: "auto",*/
        on: {
            slideChangeTransitionEnd: function () {
                console.log(this.activeIndex);
                ms.fillHtml($('.pagesDiv'), {
                    "current": this.activeIndex + 1,
                    "pageCount": 15,
                    "turndown": false
                });
            }
        }
    });
    $(".pagesDiv").createPage({
        pageCount: 15, //總頁數
        current: 1, //當前頁
        turndown: 'true', //是否顯示跳轉框，顯示為true，不現實為false,一定記得加上引號...
        backFn: function (p) {
            mySwiper.slideTo(p - 1, 800, false);
        }
    });

還差一段css代碼：

.pagesDiv{
            margin-top: 15px;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            clear: both;
        }
        .disabled{
            display: inline-block;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 50%;
            margin: 0 2px;
            color: #333;
            background: #f2f2f2;
            border: 1px solid #bfbfbf;
            vertical-align: middle;
        }
        .current{
            display: inline-block;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;
            margin: 0 2px;
            color: #a73feb;
            border-radius: 4px;
            vertical-align: middle;
            font-size: 18px;
        }
        .pagesDiv a{
            text-decoration: none;
            display: inline-block;
            color: #ffffff;
            height: 25px;
            line-height: 25px;
            width: 25px;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #ddd;
            background: #999;
            margin: 0 2px;
            vertical-align: middle;
            font-size: 16px;
        }
        .pagecount{
            display: none;
            padding: 0 10px;
            font-size: 16px;
            color: #999999;
            margin-right: -30px;
        }
        .countYe{
            display: none;
            color: #ffffff;
            margin-left: 30px;
            font-size: 14px;
        }
        input{
            outline: none;
            border: 1px solid #ddd;
            height: 25px;
            padding: 3px 10px;
            width: 25px;
            margin: 0 5px;
        }
        .turndown{
            padding: 3px 10px;
        }

寫得實在有點簡單，美化就靠大家了，其實上面分頁器還有兩個要素是沒有顯示的：

一個是總頁數，還有一個是根據輸入的數字跳轉，細心的朋友在研究上面ms對象的時候應該會發現還有這兩個的，當然，我是把它們給隱藏掉了，因為用不到嘛~