DropCard 滑走式卡片

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="卡片" class="p.30-ov">
		<t-card class="mb.30" title="DropCard 滑走式卡片"
			sub-title="滑走式卡片是一种堆叠卡片布局，支持卡片之间的间隔、缩放效果以及动态初始化和样式设置，通过简单的属性配置即可实现层次分明、视觉上具有深度感的卡片滑走动画效果。"></t-card>
		<view style="padding-top: 10rpx;overflow: visible;flex-direction: column;align-items: center;">
			<t-drop-card width="600rpx" height="400rpx" space="38rpx">
				<t-drop-card-item v-for="(item,index) in cardList1" :key="index" style="overflow: hidden;">
					<image :src="item" style="width: 100%;height: 100%;"></image>
				</t-drop-card-item>
			</t-drop-card>
		</view>
		<view style="height: 80rpx;"></view>
		<view style="display: flex;overflow: visible;flex-direction: column;align-items: center;">
			<t-drop-card width="500rpx" height="700rpx" space="38rpx">
				<t-drop-card-item v-for="(item,index) in cardList" :key="`dropcard${index}`" @left="left" @right="right"
					@center="center">
					<image :src="item" style="width: 100%;height: 100%;"></image>
				</t-drop-card-item>
			</t-drop-card>
		</view>
	</t-page>
</template>
<script lang="uts">
	export default {
		data() {
			return {
				cardList: [
					'/static/image/Z1.jpg',
					'/static/image/Z2.jpg',
					'/static/image/Z3.jpg',
					'/static/image/Z4.jpg',
					'/static/image/Z5.jpg'
				] as string[],
				cardList1: [
					'/static/image/D1.jpg',
					'/static/image/D2.jpg',
					'/static/image/D3.jpg',
					'/static/image/D4.jpg'
				] as string[]
			}
		},
		methods: {
			left() {
				console.log('left')
			},
			right() {
				console.log('right')
			},
			center() {
				console.log('center')
			}
		}
	}
</script>
<style>
	.root {
		flex: 1;
		padding: 20rpx;
		overflow: visible;
	}
</style>

Props

名称	描述	类型	默认值	可选值
width	容器宽	String	700rpx
height	容器高	String	750rpx
space	每层之前TOP值的差值	String	30rpx
scaleNumber	后面层级的缩放倍率	Number	0.05