标签：分页 样式 页面 选中 active span 过程 tom 分页器
今天项目用到swiper的自定义分页器，由于官网写的比较简单，而在网上看到也多数是以前版本的实例。经过多篇博客的参考，最后终于写出来了。
我使用的是3版本以上，而发现以前的版本和新版API上面有些差别，所以这儿就主要以3+版本为参考。
做自定义分页器的时候，我们需要使用pagination的type和renderCustom这两个参数。
panigation: {
type: ‘custom‘,
renderCustom: function(swiper, current,total){}
}
在做自定义分页器的时候，swiper会自动帮我们在定义分页器时的元素“.swiper-pagination”加上".swiper-pagination-custom"，如果前面已经在.swiper-pagination上面加了样式，就不需要在写样式了，没有就需要给"swiper-pagination-custom"定义样式（我做的时候没有加样式）
再定义两个类".swiper-pagination-customs"和".swiper-pagination-customs-active"，用来自定义需要的分页器样式（.swiper-pagination-customs自定义，但是另一个必须是active用来定义选中时的样式）
在renderCustom中循环轮播的页面，将新的分页器添加进去
let appSwiper = new Swiper(‘.swiper-comtainer‘,function(){
pagination:{
el: ‘.swiper-pagination‘,
// 自定义分页器，必须的type类型
type: ‘custom‘,
renderCustom: function(swiper,current, total){
var paginationHtml = "";
for(var i= 0; i< total; i++) {
// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
if(i === (current -1)){
paginationHtml = ‘<span class="swiper-pagination-customs swiper-pagination-customs-activ"></span>‘;
}
paginationHtml = ‘<span class="swiper-pagination-customs"></span>‘;
}
return paginationHtml;
}
}
})
到这儿就完成了自定义分页器样式的整个过程了，快去试试吧。
标签：分页 样式 页面 选中 active span 过程 tom 分页器
原文地址：https://www.cnblogs.com/HarkPark/p/8763079.html
