需求:自定义分页器样式,将小圆点替换为标题样式点击
HTML代码:
<!--分页器-->
<div class="swiper-pagination">
<ul class="pagination">
自定义内容
</ul>
</div>
JS代码:
pagination: {//分页容器的css选择器
el:'.pagination',
clickable:true,
renderBullet:function (index, className) {
let text = '';
switch (index){
case 0:
text = '标题内容1';
break;
case 1:
text = '标题内容2';
break;
}
return '<li class="'+className+'">' + text + '</li>';
}
},
这样就可以直接渲染自定义样式了