vuejs里面swiper自定义分页器

准备工作：

1. 确保数据已经获取到
2. swiper等各类引入工作已经做好
3. 你会查api（如果你不会查文档我不知道怎么跟你描述这个问题）

正常的swiper在vue中成功渲染 ：

DOM:

<div class="swiper-container">
	<div class="swiper-wrap">
		<div class="swiper-silde" v-for="item in items">{{item.xxx}}<div>
	</div>
	<div class="pagination"><div>
<div>

  JS:

var mySwiper = new Swiper('swiper-container', {
	//…其它配置项
	pagination: '.pagination',   // 分页器类名
 	paginationElement : 'div',  // 这里是指渲染的元素  跟paginationBulletRender中的div对应
 	paginationClickable:true,  // 这里是开启分页器的点击事件
    paginationBulletRender(swiper,index, className){
		return  '<div class="'+className+'">'+items[index].xxx+'</div>';
        // 这里className表示默认的swiper分页器类名
	}
})

CSS：

自定义.swiper-pagination-bullets、.swiper-pagination-bullet-active、swiper-pagination-bullets:hover的样式

注意：

这里不能在paginationBulletRender方法里面返回的dom里面使用vue的事件，这里渲染无效，可能我自己操作哪里也有问题，但是没关系，因为swiper的分页器自带点击事件，我只需要把相应的classname遍历到元素中去swiper自带的分页器点击事件就生效了

paginationBulletRender方法内的原理：

为什么可以大胆的这么遍历呢？

因为swiper在vue渲染的时候会按照数据的条数去生成相应条数的分页器，所以自定义的时候也可以按照这个原理去自定义相应个数的分页器

swiper官网说明文档链接直达车： http://3.swiper.com.cn/api/pagination/2014/1217/70.html