使用Vue-Awesome-Swiper实现旋转叠加轮播效果平移轮播效果

使⽤Vue-Awesome-Swiper实现旋转叠加轮播效果平移轮
播效果
旋转叠加
平移
前段时间做Hybrid App，UI设计湿要求某⼀个页⾯的展⽰要实现滑动轮播效果，选中的内容卡⽚居中显⽰，上⼀个内容卡⽚和下⼀个内容以⼩⼀倍的⼤⼩显⽰在选中的卡⽚后头，⽽且要⾼斯模糊等等。

最骚的是滑动特效要是⼀个个旋转叠加。

（摔！
当时⽤的是vue-cli-3 + ant-design-vue实现的页⾯，发现ant-design-vue⾥头有现成的Carousel组件可⽤，由于排期⽐较急，先暂时⽤这个实现了第⼀版，没有特效没有其他花⾥胡哨的展⽰。

验收完第⼀版后，发现ant-design-vue的坑是真的多啊。

Carousel在移动端也是⼗分的不流畅。

总是就是体验特别的不好。

最后⼀⽓之下，全部样式⾃⼰写，全部组件⾃⼰封装，将ant-design-vue完完整整移出了项⽬。

轮播图这块想到了Swiper这⼀好东西，现在已经有了vue版，但是是没有专门的vue版⽂档的，可以找到的项⽬也⽐较少。

⽆奈之下啃了Swiper4⽂档，⼀顿猛操作，摸到了⼀点点门道。

把需求实现了是也。

简单整理了⼀下，写了个简单的⼩demo，记录⼀下，如果可以帮到你那是最好啦~
1.⾸先引⼊Vue-Awesome-Swiper
引⼊Vue-Awesome-Swiper有两种⽅式，⼀种是全局引⼊，⼀种是组件内引⼊。

如果你的项⽬⾥只有⼀个地⽅要⽤到这玩意，那就在⽤到的那个页⾯引⼊就⾏，如果多个地⽅要⽤到，那就全局引⼊吧。

全局引⼊：
// main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
e(VueAwesomeSwiper, /* { default global options } */)
组件内引⼊：
// 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部分
旋转叠加
<script>
import { mapState } from 'vuex'
import store from '@/store'
export default {
data() {
return {
list: [1, 2, 3, 4, 5, 6],
swiperOption: {
// 设置slider容器能够同时显⽰的slides数量，默认为1， 'auto'则⾃动根据slides的宽度来设定数量
slidesPerView: 'auto',
/*
* 开启这个参数来计算每个slide的progress(进度、进程)
* 对于slide的progress属性，活动的那个为0，其他的依次减1
*/
watchSlidesProgress: true,
// 默认active slide居左，设置为true后居中
centeredSlides: true,
// 当你创建⼀个Swiper实例时是否⽴即初始化，这⾥我们⼿动初始化
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 // 当前元素集的progress值
let modify = 0 // 偏移权重
if (parseInt(Math.abs(slideProgress)) > 0) {
modify = Math.abs(slideProgress) * 0.2 // 不⼀定要0.2，可⾃⾏调整
}
const translate = slideProgress * modify * 500 + 'px' // 500是swiper-slide的宽度
const scale = 1 - Math.abs(slideProgress) / 5 // 缩放权重值，随着progress由中向两边依次递减，可⾃⾏调整 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) { // 设置了只有选中的元素以及他两遍的显⽰，其他隐藏
slide.css('opacity', 0)
}
}
},
slideChange: function() {
mit('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() // 现在才初始化
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,
// 设定slide与左边框的预设偏移量（单位px）
slidesOffsetBefore: 37,
// 设置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 // 缩放权重值，随着progress由中向两边依次递减，可⾃⾏调整
slide.transform(`scale3d(${scale}, ${scale}, 1)`)
}
},
slideChange: function() {
mit('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() // 现在才初始化
await this.swiper.slideTo(this.activeItemIndex)
})
}
}
}
</script>
配置参数那⾥，init我是设置的false，我是想在项⽬挂载完成后，获取到了接⼝数据之后，再⽤ 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); 可以根据⾃⼰的需要作出改动
⼤概就是这些内容，是不是很简单呢。

我会把源码地址贴出来，有需要的话就⾃⾏clone参考吧~，项⽬⾥我使⽤的是vue-
cli3，可以⾃⾏调整。

总结
以上所述是⼩编给⼤家介绍的使⽤Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！。