今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。

1、vue-tantan-stack

一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。

功能分析

堆叠滑动的功能很简单，用一张图概括就是

堆叠效果

堆叠图片效果在网上有大量的实例，实现的方法大同小异，主要通过在父层设定 perspective 及 perspective-origin，来实现子层的透视，子层设定好 translate3d Z轴数值即可模拟出堆叠效果。

// 图片堆叠dom
<!--opacity: 0 隐藏我们不想看到的stack-item层级-->
<!--z-index: -1 调整stack-item层级"-->
<ul class="stack">
  <li class="stack-item" style="transform: translate3d(0px, 0px, 0px);opacity: 1;z-index: 10;"><img src="1.png" alt="01"></li>
  <li class="stack-item" style="transform: translate3d(0px, 0px, -60px);opacity: 1;z-index: 1"><img src="2.png" alt="02"></li>
  <li class="stack-item" style="transform: translate3d(0px, 0px, -120px);opacity: 1;z-index: 1"><img src="3.png" alt="03"></li>
  <li class="stack-item" style="transform: translate3d(0px, 0px, -180px);opacity: 0;z-index: -1"><img src="4.png" alt="04"></li>
  <li class="stack-item" style="transform: translate3d(0px, 0px, -180px);opacity: 0;z-index: -1"><img src="5.png" alt="05"></li>
</ul>
<style>
.stack {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 1000px; //子元素视距
  perspective-origin: 50% 150%; //子元素透视位置
  -webkit-perspective: 1000px;
  -webkit-perspective-origin: 50% 150%;
  margin: 0;
  padding: 0;
}
.stack-item{
  background: #fff;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
}
.stack-item img {
  width: 100%;
  display: block;
  pointer-events: none;
}
</style>

上面只是一组静态代码，我们希望得到的是vue组件，具体实现方法大家可以去参看源码。

安装

$ npm i vue-tantan-stack -S

使用组件

<template>
  <div class="mid-center">
    <div class="stack-wrapper">
      <stack ref="stack" :pages="someList" :stackinit="stackinit"></stack>
    </div>
    <div class="controls">
      <button @click="prev" class="button"><i class="prev"></i><span class="text-hidden">prev</span></button>
      <button @click="next" class="button"><i class="next"></i><span class="text-hidden">next</span></button>
    </div>
  </div>
</template>
<script>
import stack from '../components/stack'
export default {
  el: '#stack',
  data () {
    return {
      someList: [],
      stackinit: {
        visible: 3
      }
    }
  },
  mounted () {
    let that = this
    setTimeout(function () {
      that.someList = [
        { html: '<img src="src/img/1.png" alt="01">' },
        { html: '<img src="src/img/2.png" alt="02">' },
        { html: '<img src="src/img/3.png" alt="03">' },
        { html: '<img src="src/img/4.png" alt="04">' },
        { html: '<img src="src/img/5.png" alt="05">' },
        { html: '<img src="src/img/6.png" alt="06">' },
        { html: '<img src="src/img/7.png" alt="07">' }
      ]
    }, 2000)
  },
  components: {
    stack
  },
  methods: {
    prev () {
      this.$refs.stack.$emit('prev')
    },
    next () {
      this.$refs.stack.$emit('next')
    }
  }
}
</script>

最后附上demo及项目地址

# demo地址
https://warpcgd.github.io/vue-tantan-stack/

# 仓库地址
https://github.com/warpcgd/vue-tantan-stack

2、vue-card-slide

基于 vue2.x 构建的卡片拖动切换组件。和第一个有些类似，不过实现方式不一样，大家可以去看看。

项目结构

安装

$ npm i vue-card-slide -S

使用组件

<template>
  <div class="card-wrapper">
    <vue-card-slide @success='sucEvent' @error='errEvent'></vue-card-slide>
  </div>
</template>
<script>
import cardSlide from 'vue-card-slide'
export default {
  data () {
    return {}
  },
  components: {
    cardSlide
  },
  methods: {
    sucEvent(value) {
      console.log(value)
    },
    errEvent(value) {
      console.log(value)
    }
  }
}
</script>

# 项目github地址
https://github.com/Carrie999/vue-card-slide

3、vue-slide-card

vue层叠卡片滑动切换、卡牌动态滑动切换效果。

大家可以根据需要自行定制一些酷炫的效果。

# demo地址
http://www.yunfengzhijia.cn/git-demo/vue-slide-card/#/

# 仓库地址
https://github.com/Kevin-269581661/vue-slide-card

ok，就介绍到这里。感兴趣的小伙伴们可以去看下，欢迎交流分享。