今天给大家分享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地址 仓库地址

基于 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地址

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

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

# demo地址 仓库地址

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