自定义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;width:0.2rem;height:0.2rem;display:block;background:rgba(255,139,0,0.5);cursor:pointer;border-radius:50%;position:relative;"><span style="width: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;width:0.12rem;height:0.12rem;display:block;background:rgba(255,139,0,1);cursor:pointer;border-radius:50%;position:relative;"><span style="width: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;

// },