介绍

vue3 中使用 swiper, 实现轮播图的效果;默认的 分页器是以小圆点的形式显示,但是很多时候会用到自定义分页器,这就需要修改内置的参数进行配置;
例如,如下所示,需要通过 swiper实现时间轴,然后分页器就需要自定义成具体的时间;
在这里插入图片描述

代码

 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css/pagination' 
 import {Pagination} from 'swiper'
  const pagination = ref({
    el: ".swiper-pagination",
    clickable: true,
    type: 'custom',
      renderCustom:function(swiper,current,total){
      var paginationHtml = '';
      var text = ['2014','2015','2016','2017','2018','2019'];
      for(var i=1;i<=total;i++){
        if(i==current){
          paginationHtml+=` <span class='pagination_text swiper-pagination-bullet swiper-pagination-bullet-active'>${text[i-1]}</span>`
        }else{
          paginationHtml+=`<span class='pagination_text swiper-pagination-bullet'>${text[i-1]}</span>`
        }
      };
      return paginationHtml
    }
  })
Logo

前往低代码交流专区

更多推荐