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

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

創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設的網(wǎng)絡公司；我們對營銷、技術、服務都有自己獨特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關注我們的網(wǎng)站制作、網(wǎng)站設計質量和服務品質，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認可，能夠為行業(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術創(chuàng)新，服務升級，滿足企業(yè)一站式營銷型網(wǎng)站需求，讓再小的品牌網(wǎng)站設計也能產(chǎn)生價值！

為什么要使用Vue

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

旋轉疊加

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

平移

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

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

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

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

1.首先引入Vue-Awesome-Swiper

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

全局引入：

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

組件內引入：

// xxx.vue

2.在頁面使用

js部分

旋轉疊加

平移

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

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;
   // 表示所有屬性都有動作效果，過度時間為0.4s，以慢速開始和結束的過渡效果
   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;
   }
  }
 }
}

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

大概就是這些內容，是不是很簡單呢。我會把源碼地址貼出來，有需要的話就自行clone參考吧~，項目里我使用的是vue-cli3，可以自行調整。

以上是“怎么使用Vue-Awesome-Swiper實現(xiàn)旋轉疊加輪播效果&平移輪播效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：怎么使用Vue-Awesome-Swiper實現(xiàn)旋轉疊加輪播效果&平移輪播效果
鏈接分享：http://weahome.cn/article/gcoohp.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

為什么要使用Vue

其他資訊

網(wǎng)站制作

企業(yè)服務

網(wǎng)站建設

服務器托管