怎么使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果

這篇文章主要介紹怎么使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

旋轉(zhuǎn)疊加

平移

前段時(shí)間做Hybrid App，UI設(shè)計(jì)濕要求某一個(gè)頁面的展示要實(shí)現(xiàn)滑動(dòng)輪播效果，選中的內(nèi)容卡片居中顯示，上一個(gè)內(nèi)容卡片和下一個(gè)內(nèi)容以小一倍的大小顯示在選中的卡片后頭，而且要高斯模糊等等。。最騷的是滑動(dòng)特效要是一個(gè)個(gè)旋轉(zhuǎn)疊加。（摔！

當(dāng)時(shí)用的是vue-cli-3 + ant-design-vue實(shí)現(xiàn)的頁面，發(fā)現(xiàn)ant-design-vue里頭有現(xiàn)成的Carousel組件可用，由于排期比較急，先暫時(shí)用這個(gè)實(shí)現(xiàn)了第一版，沒有特效沒有其他花里胡哨的展示。驗(yàn)收完第一版后，發(fā)現(xiàn)ant-design-vue的坑是真的多啊。。Carousel在移動(dòng)端也是十分的不流暢?？偸蔷褪求w驗(yàn)特別的不好。最后一氣之下，全部樣式自己寫，全部組件自己封裝，將ant-design-vue完完整整移出了項(xiàng)目。

輪播圖這塊想到了Swiper這一好東西，現(xiàn)在已經(jīng)有了vue版，但是是沒有專門的vue版文檔的，可以找到的項(xiàng)目也比較少。無奈之下啃了Swiper4文檔，一頓猛操作，摸到了一點(diǎn)點(diǎn)門道。把需求實(shí)現(xiàn)了是也。簡(jiǎn)單整理了一下，寫了個(gè)簡(jiǎn)單的小demo，記錄一下，如果可以幫到你那是最好啦~

1.首先引入Vue-Awesome-Swiper

引入Vue-Awesome-Swiper有兩種方式，一種是全局引入，一種是組件內(nèi)引入。如果你的項(xiàng)目里只有一個(gè)地方要用到這玩意，那就在用到的那個(gè)頁面引入就行，如果多個(gè)地方要用到，那就全局引入吧。

全局引入：

// main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

組件內(nèi)引入：

// xxx.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 components: {
  swiper,
  swiperSlide
 }
}
</script>

2.在頁面使用

<template>
 <div class="swiper-content">
  <swiper ref="mySwiper" :options="swiperOption" class="show-swiper">
   <template v-for="(item, index) in list">
    <swiper-slide :key="index">
     <div class="swiper-item">
      <span>{{ item }}</span>
     </div>
    </swiper-slide>
   </template>
  </swiper>
 </div>
</template>

js部分

旋轉(zhuǎn)疊加

<script>
import { mapState } from 'vuex'
import store from '@/store'
export default {
 data() {
  return {
   list: [1, 2, 3, 4, 5, 6],
   swiperOption: {
    // 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量，默認(rèn)為1， 'auto'則自動(dòng)根據(jù)slides的寬度來設(shè)定數(shù)量
    slidesPerView: 'auto',
    /*
    * 開啟這個(gè)參數(shù)來計(jì)算每個(gè)slide的progress(進(jìn)度、進(jìn)程)
    * 對(duì)于slide的progress屬性，活動(dòng)的那個(gè)為0，其他的依次減1
    */
    watchSlidesProgress: true,
    // 默認(rèn)active slide居左，設(shè)置為true后居中
    centeredSlides: true,
    // 當(dāng)你創(chuàng)建一個(gè)Swiper實(shí)例時(shí)是否立即初始化，這里我們手動(dòng)初始化
    init: false,
    on: {
     progress: function() {
      for (let i = 0; i < this.slides.length; i++) {
       const slide = this.slides.eq(i) // 指定匹配元素集縮減值
       const slideProgress = this.slides[i].progress // 當(dāng)前元素集的progress值

       let modify = 0 // 偏移權(quán)重
       if (parseInt(Math.abs(slideProgress)) > 0) {
        modify = Math.abs(slideProgress) * 0.2 // 不一定要0.2，可自行調(diào)整
       }
       const translate = slideProgress * modify * 500 + 'px' // 500是swiper-slide的寬度
       const scale = 1 - Math.abs(slideProgress) / 5 // 縮放權(quán)重值，隨著progress由中向兩邊依次遞減，可自行調(diào)整
       const zIndex = 99 - Math.abs(Math.round(10 * slideProgress))
       slide.transform(`translateX(${translate}) scale(${scale})`)
       slide.css('zIndex', zIndex)
       slide.css('opacity', 1) // 是否可見
       if (parseInt(Math.abs(slideProgress)) > 1) { // 設(shè)置了只有選中的元素以及他兩遍的顯示，其他隱藏
        slide.css('opacity', 0)
       }
      }
     },
     slideChange: function() {
      store.commit('SET_ACTIVE_INDEX', this.activeIndex)
     }
    }
   }
  }
 },
 computed: {
  swiper() {
   return this.$refs.mySwiper.swiper
  },
  ...mapState({
   activeItemIndex: state => state.activeIndex
  })
 },
 mounted() {
  this.initSwiper()
 },
 methods: {
  initSwiper() {
   this.$nextTick(async() => {
    await this.swiper.init() // 現(xiàn)在才初始化
    await this.swiper.slideTo(this.activeItemIndex)
   })
  }
 }
}
</script>

平移

<script>
import { mapState } from 'vuex'
import store from '@/store'
export default {
 data() {
  return {
   list: [1, 2, 3, 4, 5, 6],
   swiperOption: {
    slidesPerView: 'auto',
    watchSlidesProgress: true,
    // 設(shè)定slide與左邊框的預(yù)設(shè)偏移量（單位px）
    slidesOffsetBefore: 37,
    // 設(shè)置slide之間的距離（單位px）
    spaceBetween: 17,
    centeredSlides: true,
    init: false,
    on: {
     progress: function() {
      for (let i = 0; i < this.slides.length; i++) {
       const slide = this.slides.eq(i)
       const slideProgress = this.slides[i].progress

       const scale = 1 - Math.abs(slideProgress) / 5 // 縮放權(quán)重值，隨著progress由中向兩邊依次遞減，可自行調(diào)整
       slide.transform(`scale3d(${scale}, ${scale}, 1)`)
      }
     },
     slideChange: function() {
      store.commit('SET_ACTIVE_INDEX', this.activeIndex)
     }
    }
   }
  }
 },
 computed: {
  swiper() {
   return this.$refs.mySwiper.swiper
  },
  ...mapState({
   activeItemIndex: state => state.activeIndex
  })
 },
 mounted() {
  this.initSwiper()
 },
 methods: {
  initSwiper() {
   this.$nextTick(async() => {
    await this.swiper.init() // 現(xiàn)在才初始化
    await this.swiper.slideTo(this.activeItemIndex)
   })
  }
 }
}
</script>

配置參數(shù)那里，init我是設(shè)置的false，我是想在項(xiàng)目掛載完成后，獲取到了接口數(shù)據(jù)之后，再用 this.swiper.init() 去初始化輪播組件的，然后我把激活項(xiàng)的索引存在了vuex里頭，這樣每次從其他頁面返回這個(gè)頁面，就可以用 this.swiper.slideTo(this.activeItemIndex) 去控制我要定位到哪一個(gè)內(nèi)容卡片先。

3.樣式初始化方面

swiper-content {
 width: 100%;
 height: 100%;
 position: relative;
 overflow: hidden;
 margin: 0 auto;
 padding: 50px 0;

 .show-swiper {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  .swiper-slide {
   width: 500px;
   // 表示所有屬性都有動(dòng)作效果，過度時(shí)間為0.4s，以慢速開始和結(jié)束的過渡效果
   transition: all .4s cubic-bezier(.4, 0, .2, 1);
   
   .swiper-item {
    width: 100%;
    height: 500px;
    background: rgb(140, 172, 134);
    border-radius: 6px;
    color: orangered;
    font-size: 24px;
    line-height: 1.5;
    border: 1px solid orangered;
   }
  }
 }
}

因?yàn)?slidesPerView: 'auto' ，所以swiper-slide我們要給他一個(gè)初始化的寬度，以便他自動(dòng)計(jì)算容器寬度，然后這里我設(shè)置了動(dòng)畫的效果 transition: all .4s cubic-bezier(.4, 0, .2, 1); 可以根據(jù)自己的需要作出改動(dòng)

大概就是這些內(nèi)容，是不是很簡(jiǎn)單呢。我會(huì)把源碼地址貼出來，有需要的話就自行clone參考吧~，項(xiàng)目里我使用的是vue-cli3，可以自行調(diào)整。

以上是“怎么使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！