今天项目用到swiper的自定义分页器,由于官网写的比较简单,而在网上看到也多数是以前版本的实例。经过多篇博客的参考,最后终于写出来了。
使用版本
我使用的是3版本以上,而发现以前的版本和新版API上面有些差别,所以这儿就主要以3+版本为参考。
使用的API
做自定义分页器的时候,我们需要使用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用来定义选中时的样式)
在rende