t-drop-card

DropCard 下拉卡片

组件介绍

滑走式卡片是一种堆叠卡片布局，支持卡片之间的间隔、缩放效果以及动态初始化和样式设置，通过简单的属性配置即可实现层次分明、视觉上具有深度感的卡片滑走动画效果。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <t-drop-card :space="'30rpx'" :scaleNumber="0.05">
    <t-drop-card-item v-for="(item, index) in cardList" :key="index">
      <t-view class="card-item">
        <t-text class="card-title">{{ item.title }}</t-text>
        <t-text class="card-content">{{ item.content }}</t-text>
      </t-view>
    </t-drop-card-item>
  </t-drop-card>
</template>

<script setup>
const cardList = ref([
  { title: '卡片 1', content: '这是第一张卡片的内容' },
  { title: '卡片 2', content: '这是第二张卡片的内容' },
  { title: '卡片 3', content: '这是第三张卡片的内容' },
  { title: '卡片 4', content: '这是第四张卡片的内容' },
  { title: '卡片 5', content: '这是第五张卡片的内容' }
]);
</script>

<style scoped>
.card-item {
  width: 100%;
  height: 300rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.card-content {
  font-size: 28rpx;
  color: #666;
}
</style>

Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain
space	String	"30rpx"	每层之前TOP值的差值	-
scaleNumber	Number	0.05	每层依次缩放倍率	-

Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Slots

插槽名	说明
default	卡片内容插槽，用于放置t-drop-card-item子组件