博客

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>';
        },*/
  },
});  
</script>

renderBuffet圆点带圆环svg动画案例

如下，做svg圆环绘制，定义大小，定义svg圆环半径。

在renderBullet预留函数区域内写入并return dom节点即可。

data() {
    return {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            let radius = 12;
            // 圆环进度
            let currentProgress = 100;
            let dash1 = (((radius - 2) * 2 * Math.PI) / 100) * currentProgress;
            let dash2 = (radius - 2) * 2 * Math.PI + "px";
            return (
              "<span class=" +
              className +
              "><svg width=" +
              radius * 2 +
              " height=" +
              radius * 2 +
              "><circle cx=" +
              radius +
              " cy=" +
              radius +
              " r=" +
              (radius - 2) +
              " stroke='#fff' stroke-width='2' stroke-dasharray=" +
              dash1 +
              "," +
              dash2 +
              " fill='none'/></svg></span>"
            );
          }
        }
    },
}

下方的css内circleLoad动画控制着svg圆环的stroke-dashoffset，以形成旋转动画。这里，当圆环动画旋转完毕，通过监听动画结束，控制svg圆环的style样式来达到圆环显示与隐藏。

methods: {
    // 监听动画执行完成
    animationListener() {
      let that = this;
      document.addEventListener("animationend", function () {
        if (that.$refs["paginationDot"] && that.$refs["paginationDot"][0]) {
          that.$refs.paginationDot[0].getElementsByClassName(
            "swiper-pagination-bullet-active"
          )[0].children[0].style.display = "none";
        }
      });
    },
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  position: relative;
  margin: 0 24px;

  svg {
    position: absolute;
    display: none;
    left: -7px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  svg {
    display: block;
    animation: circleLoad 9.5s linear;
  }
}

// 旋转动画
@keyframes circleLoad {
  0% {
    stroke-dashoffset: 62;
  }

  100% {
    stroke-dashoffset: 0;
  }
}