vue-swiper插件pagination分页器renderBuffet使用分析&分页圆点加svg圆环动画案例

最新推荐文章于 2024-08-10 07:41:08 发布

页神建辑-思而后学

最新推荐文章于 2024-08-10 07:41:08 发布

阅读量1.8k

点赞数

分类专栏：插件工具文章标签：前端

本文链接：https://blog.csdn.net/weixin_41993525/article/details/109679065

版权

本文分析了Vue Swiper插件中pagination分页器的renderBullet方法，展示了如何实现带有SVG圆环动画的分页圆点。通过自定义渲染函数，结合SVG和CSS动画，实现了圆环旋转效果，并通过监听动画结束控制圆环的显示与隐藏。

摘要由CSDN通过智能技术生成

swiper是应用于web上的一个轮播图插件，分页器是轮播图内必不可少的一个元素，swiper的pagination分页器部件提供了有限的（轮播图分页器dom节点）可扩展性，可以相对有限的更改及增加pagination分页器的样式及功能。

renderBullet(index,className)

渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。

官网文档使用代码示例：

<script>
var swiper = new Swiper('.swiper-container', {
   
  pagination: {
   
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
   
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
     /* renderBullet: function (index, className) {
          switch(index){
            case 0:text='壹';break;
            case 1:text='贰';break;
            case 2:text='叁';break;
            case 3:text='肆';break;
            case 4:text='伍';break;
          }
          return '<span class="' + className + '">' + text + '</span>';
        },*/
  },
}