自定义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;
// },
