使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
旋轉(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)整。
總結(jié)
以上所述是小編給大家介紹的使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實(shí)現(xiàn)常用的方法
表格常用功能經(jīng)常有字段篩選、更多字段篩選彈框來過濾出我們所需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實(shí)現(xiàn)常用的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12vue實(shí)現(xiàn)給div綁定keyup的enter事件
這篇文章主要介紹了vue實(shí)現(xiàn)給div綁定keyup的enter事件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07前端開發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09使用keep-alive時(shí),數(shù)據(jù)無法刷新的問題及解決
這篇文章主要介紹了使用keep-alive時(shí),數(shù)據(jù)無法刷新的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue3使用Vuex之mapState與mapGetters詳解
這篇文章主要為大家介紹了Vue3使用Vuex之mapState與mapGetters詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03