使用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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
jQuery的事件预绑定
Dec 05 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
微信小程序实现日历功能
Nov 27 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 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
php IP转换整形(ip2long)的详解
2013/06/06 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
简单理解Python中的装饰器
2015/07/31 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python networkx包的实现
2020/02/14 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
大四自我鉴定范文
2013/10/06 职场文书
岗位职责风险点
2014/03/12 职场文书
安全协议书
2014/04/23 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
办公室岗位职责范本
2015/04/11 职场文书
叶问观后感
2015/06/15 职场文书
关于军训的感想
2015/08/07 职场文书
MySQL创建管理子分区
2022/04/13 MySQL
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫