网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一款Vue卡片堆叠滑动组件, 允许用户在Web应用程序上创建可滑动,可调整的堆栈卡片。
1. 导入vue-card-stack组件。
import Vue from "vue";
import VueCardStack from "vue-card-stack";
2. 将组件添加到应用模板。
<vue-card-stack :cards="cards" :stack-width="480" :card-width="320">
<template v-slot:card="{ card }">
<div
style="width: 100%; height: 100%;"
:style="{ background: card.background }"
></div>
</template>
</vue-card-stack>
3.注册组件并确定每个卡的背景色,如下所示:
export default {
components: {
VueCardStack
},
data() {
return {
cards: [
{ background: "#000" },
{ background: "#222" },
{ background: "#fff" },
{ background: "#333" },
{ background: "#666" }
]
};
}
};
4.所有默认配置项。
cards: {
type: Array,
default: () => []
},
cardWidth: {
type: Number,
default: () => 300
},
cardHeight: {
type: Number,
default: () => 400
},
stackWidth: {
type: [Number, String],
default: () => null
},
sensitivity: {
type: Number,
default: () => 0.25
},
maxVisibleCards: {
type: Number,
default: () => 10
},
scaleMultiplier: {
type: Number,
default: () => 0.5 // last visible card will be 50% scale
},
speed: {
type: Number,
default: () => 0.2
},
paddingHorizontal: {
type: Number,
default: () => 20
},
paddingVertical: {
type: Number,
default: () => 20
}
转载请注明来源:Vue卡片堆叠滑动组件(vue-card-stack)
本文永久链接地址:https://www.moyouyouw.cn/code/1155.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论