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


Posted in Javascript onAugust 16, 2019

旋转叠加

使用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'
Vue.use(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() {
      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>

平移

<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() {
      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); 可以根据自己的需要作出改动

大概就是这些内容,是不是很简单呢。我会把源码地址贴出来,有需要的话就自行clone参考吧~,项目里我使用的是vue-cli3,可以自行调整。

总结

以上所述是小编给大家介绍的使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
微信小程序实现录音功能
Nov 22 Javascript
vue使用element-ui按需引入
May 20 Vue.js
详解Vue中组件传值的多重实现方式
Aug 16 #Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 #Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 #Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 #Javascript
基于vue写一个全局Message组件的实现
Aug 15 #Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 #Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 #Javascript
You might like
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
网页常用特效代码整理
2006/06/23 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python中字符串前面加r的作用
2015/06/04 Python
python实现用户登录系统
2016/05/21 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
国际贸易专业个人鉴定
2014/02/22 职场文书
员工年终自我评价
2014/09/14 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Redis RDB技术底层原理详解
2021/09/04 Redis