vue卡片列表怎么实现（3个超秀的Vue卡片翻动组件Vue-Card-Slide）
今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。
一款基于 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
基于 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
vue层叠卡片滑动切换、卡牌动态滑动切换效果。
大家可以根据需要自行定制一些酷炫的效果。
# demo地址
http://www.yunfengzhijia.cn/git-demo/vue-slide-card/#/
# 仓库地址
https://github.com/Kevin-269581661/vue-slide-card
ok，就介绍到这里。感兴趣的小伙伴们可以去看下，欢迎交流分享。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
