使用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 第三章章节总结的例子
Mar 23 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
详解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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
bootstrap table小案例
2016/10/21 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python决策树之CART分类回归树详解
2017/12/20 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
django基础学习之send_mail功能
2019/08/07 Python
Python简单实现区域生长方式
2020/01/16 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
大学旷课检讨书
2014/01/28 职场文书
小学英语教学反思
2014/01/30 职场文书
公司周年庆典致辞
2015/07/30 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python