在實際開發中，使用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對象的時候應該會發現還有這兩個的，當然，我是把它們給隱藏掉了，因為用不到嘛~