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