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

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() {
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() // 现在才初始化
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); 可以根据自己的需要作出改动