自定义vueawesomeswiper分页器样式

swiperOption: {//swiper的配置项
  notNextTick: true,//想获得swiper实例对象,这个必须为true
  direction: 'vertical',
  // grabCursor: true,//鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
  setWrapperSize: true,//Swiper使用flexbox布局(display: flex),开启这个设定会在Wrapper上添加等于slides相加的宽或高,在对flexbox布局的支持不是很好的浏览器中可能需要用到。
  autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化
  slidesPerView:1,//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
  mousewheel: true,//开启鼠标滚轮控制Swiper切换。可设置鼠标选项,默认值false
  mousewheelControl: true,//同上
  height:window.innerHeight, // 高度设置,占满设备高度
  resistanceRatio: 0,//抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘,0时完全无法拖离。本业务需要
  observeParents: true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新
  pagination: {
    el: '.swiper-paginationfull',
    type: 'bullets',//这个不用变成custom值,就可以之定义分页器样式(可爽)
    bulletElement : 'span',//设置分页器小圆点标签,默认为span标签
    clickable:true,
      paginationClickable: true,
    notNextTick:true,
    bulletClass: 'bullet-class',//设置小圆点的类名,包括下面的当前页面导航器的类名,用来写css样式,注意,这段css一定要引在,swiper实例创建之前,通常用import引入,图片可以考虑用base64方式写入!!!!!!!!!!
    bulletActiveClass: 'bullet-active-class',!!!!!!!!!!!!!!!
},
 
 
 
//下面是走的弯路,不过了解了点swiper中的跳转页面的方法,以及其它方式改变分页器的方法
1、跳转的方法
changeIndex(index){
  console.log(this.$refs.mySwiper.swiper)
  this.$refs.mySwiper.swiper.slideTo(index, 1000, true);//切换到第一个slide,速度为1秒
}//传入index值就行,第一页为0
2、获取swiper对象的方法
computed: {
  // 如果你需要得到当前的swiper对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的swiper对象,同时notNextTick必须为true
  swiper() {
    return this.$refs.mySwiper.swiper
  }
},//需要在swiper对象上设置ref=“mySwiper”
 
3、自定义分页器的其它方法,需要把type: 'bullets'变成custom,麻烦还没实现成功(不建议用)
// renderCustom: function (swiper, current, total) {
// var _html='';
// var bullets='../../images/bullets.png';
// var active_bullet='../../images/active_bullet.png';
// for(var i=1;i<=total;i++){
// if ( current == i ) {
// _html += '<span class="swiper-pagination-customs swiper-pagination-customs-active" style="margin:0 auto 0.2rem;0.2rem;height:0.2rem;display:block;background:rgba(255,139,0,0.5);cursor:pointer;border-radius:50%;position:relative;"><span style="0.12rem;height:0.12rem;background:rgba(255,139,0,1);border-radius:50%;position:absolute;top:0.04rem;left:0.04rem;"></span></span>';
// } else {
// _html += '<span class="swiper-pagination-customs" style="margin:0 auto 0.2rem;0.12rem;height:0.12rem;display:block;background:rgba(255,139,0,1);cursor:pointer;border-radius:50%;position:relative;"><span style="0.06rem;height:0.06rem;background:rgba(0,0,0,0.5);border-radius:50%;position:absolute;top:0.03rem;left:0.03rem;"></span></span>';
// }
// }
// return _html;

// },
原文地址:https://www.cnblogs.com/fqh123/p/9839074.html