自定義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;

// },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM