使用Vue-Awesome-Swiper实现旋转、叠加和旋转、平移和旋转

旋转叠加

翻译

前段时间做了Hybrid App，UI设计湿了要求某个页面的显示要达到滑动轮播效果，选中的内容卡要显示在中间，上一个内容卡和下一个内容要以两倍大小显示在选中的卡后面，要高斯模糊等等。最骚的是滑动效果要一个一个旋转叠加。(摔倒！

当时使用的是vue-cli-3 ant-design-vue实现的页面，发现ant-design-vue中有现成的Carousel组件可用。因为日程安排紧急，第一版暂时用这个实施，没有特效或者其他花哨的展示。第一版被接受后，发现ant-design-vue中有很多坑。转盘在移动端也很不顺畅。总是不好的体验。最后，所有的风格都是自己写的，所有的组件都是自己打包的，彻底把ant-design-vue从项目中去掉了。

转盘想到了Swiper的好东西，现在有vue版本，但是没有专门的vue版本文档，能找到的项目也很少。无奈之下，我啃下了Swiper4文档，经过一番激烈的操作，感觉有点门道。需求已经实现。我只是整理了一下，写了一个简单的演示，然后录了下来。如果能帮到你就最好了~

1.首先，介绍vue-awesome-wiper

Vue-Awesome-Swiper的引入方式有两种，一种是全局引入，一种是组件内引入。如果你的项目中只有一个地方使用这个东西，就在使用它的页面上介绍一下，如果在多个地方使用，就在全球范围内介绍一下。

全局导入：

//main.js从' vue-awesome wiper '导入vue-awesome wiper '导入' wiper/dist/CSS/wiper . CSS ' vue . use(vue awesome wiper，/* {默认全局选项} */)组件引入：

//XXX . vue script import ' swipe/dist/CSS/swipe . CSS '从' vue-awesome-swipe '导入{swipe，swipe}}导出默认{ components: { swipe，swipe}}/script2。

模板div class=' swiper-content ' swiper ref=' MySwifer ' : options=' Swiproption ' class=' show-swiper '模板v-for='(item，Index)在列表中' wiper-slide : key=' Index ' div class=' wiper-item ' span { { item } }/span/div/wiper-slide/template/wiper/div/template JS

旋转叠加

脚本从“vuex”导入{ mapState }从“@/store”导入存储导出默认{ data(){ return { list :[1，2，3，4，5，6]，swiperoptions : {//设置滑块容器能够同时显示的幻灯片数量，默认为1、"自动"则自动根据幻灯片的宽度来设定数量slidesPerView: ' auto '，/* *开启这个参数来计算每个幻灯片的进度（进度、进程) * 对于幻灯片的进步属性，活动的那个为0,其他的依次减1 */观看幻灯片进度： true，//默认活动幻灯片居左，设置为真实的后居中中心lided : true，//当你创建一个捣蛋鬼实例时是否立即初始化，这里我们手动初始化init: false， { progress : function(){ for(让I=0；一、幻灯片长度；I){ const slide=这个。幻灯片。方程式(一)//指定匹配元素集缩减值恒定幻灯片进度=这个。幻灯片.进度/当前元素集的进步值让修改=0 //偏移权重if(parsent(数学。ABS(幻灯片进度))0){修改=数学。ABS(幻灯片进度)* 0.2//不一定要0.2,可自行调整} const translate=幻灯片进度*修改* 500 ' px '/500是滑梯的宽度常量刻度=1 - Math.abs(slideProgress)/5 //缩放权重值，随着进步由中向两边依次递减，可自行调整const ZINDEX=99-数学。ABS(数学。圆形(10 *幻灯片进度))幻灯片。transform(` translatex($ { translate })scale($ { scale })`)幻灯片。CSS(' zIndex '，zIndex) slide.css('不透明度',1) //是否可见if(parsent(数学。ABS(幻灯片进度))1){//设置了只有选中的元素以及他两遍的显示，其他隐藏slide.css('不透明度，0) } }，slide change : function(){ store。提交(' SET _ ACTIVE _ INDEX '，这个。ACTIVINDEX)} } } } }，计算出： { swiper(){返回这个.参考文献。我的妻子。swiper }，mapState({ active item index : state=state。activeindex })}，mounted() { this.initSwiper() }，methods: { initSwiper() { this .$ NextTick(async()={等等这个。斯威珀。init()//现在才初始化等待这个。斯威珀。滑到(这个。activeiteindex)})} } } }脚本平移

脚本从“vuex”导入{ mapState }从“@/store”导入存储导出默认{ data(){ return { list :[1，2，3，4，5，6]，swiperoptions : { slidersperview : ' auto '，watchSlidesProgress: true，//设定幻灯片与左边框的预设偏移量（单位px) slidesOffsetBefore: 37，//设置幻灯片之间的距离（单位px) spaceBetween: 17，centeredSlides: true，init: false， { progress : function(){ for(让I=0；一、幻灯片长度；I){ const slide=这个。幻灯片。等式(1)恒定幻灯片进度=这个。幻灯片.进度常量等级=1-数学。ABS(幻灯片进度)/5//缩放权重值，随着进步由中向两边依次递减，可自行调整滑动。变换(` scale 3d(${scale}，${scale}，1)`) }，slide change : function(){ store。提交(' SET _ ACTIVE _ INDEX '，这个。ACTIVINDEX)} } } } } } } })，计算出： { swiper(){返回这个.参考文献。我的妻子。swiper }，mapState({ active item index : state=state。activeindex })}，mounted() { this.initSwiper() }，methods: { initSwiper() { this .$ NextTick(async()={等等这个。斯威珀。init()//现在才初始化等待这个。斯威珀。滑到(这个。activeitemindex)})} } } }脚本配置参数那里，初始化我是设置的假的，我是想在项目挂载完成后，获取到了接口数据之后，再用this.swiper.init()去初始化轮播组件的，然后我把激活项的索引存在了状态管理里头，这样每次从其他页面返回这个页面，就可以用this.swiper.slideTo去控制我要定位到哪一个内容卡片先。

3.样式初始化方面

swiper-content { width : 100%；高度： 100%；相对位置：飞越：隐藏；margin: 0 autopadd : 50px 0；show-swiper { width : 100%；高度： 100%；top : 0；left : 0；swiper-slide { width : 500 px；//表示所有属性都有动作效果，过渡时间为0.4s，慢起慢落的过渡效果为：all.4s三次bezier (.4，0，0.2，1)；swiper-item { width : 100%；高度： 500 px；背景： rgb(140，172，134)；border-radius : 6px；颜色：橙色；font-size : 24px；线高： 1.5；border: 1px实心橙色；}}}}因为slidersperview :‘auto’，我们需要给他一个swiper-slide的初始化宽度，这样他就可以自动计算容器宽度，然后在这里我设置了动画效果过渡： all.4s三次bezier (.4，0，2，1)；你可以根据自己的需要做出改变

大概就是这些内容，不是很简单吗？我会把源地址贴出来，必要的话克隆出来做参考。我在项目中使用了vue-cli3，可以自己调整。

摘要

以上是使用Vue-Awesome-Swiper实现旋转叠加轮播效果和平移轮播效果的介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！