在实际开发中,使用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对象的时候应该会发现还有这两个的,当然,我是把它们给隐藏掉了,因为用不到嘛~