Tui Plus Vapor

Appearance

# t-drop-card-item

DropCardItem 下拉卡片项

t-drop-card-item 组件介绍 ​

滑走式卡片子组件，与t-drop-card组件配合使用，用于实现堆叠卡片的滑走效果，支持触摸交互和动画效果。

t-drop-card-item 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-drop-card-item 基础用法 ​

vue
<template>
	<view class="f">
		<t-card class="m-15"
				title="DropCard 滑走式卡片"
				sub-title="滑走式卡片是一种堆叠卡片布局，支持卡片之间的间隔、"></t-card>
		<view class="pt-5 ov fc">
			<t-drop-card class="w-300 h-200 ov"
						 space="9px">
				<t-drop-card-item v-for="(item,index) in cardList1"
								  :key="index"
								  style="overflow: hidden;">
					<image :src="item"
						   class="twh-100%"></image>
				</t-drop-card-item>
			</t-drop-card>
		</view>
		<view class="h-55"></view>
		<view class="ov fc">
			<t-drop-card class="w-250 h-350 ov"
						 space="9px">
				<t-drop-card-item v-for="(item,index) in cardList"
								  :key="`dropcard${index}`"
								  @left="left"
								  @right="right"
								  @center="center">
					<image :src="item"
						   class="twh-100%"></image>
				</t-drop-card-item>
			</t-drop-card>
		</view>
		<view class="h-300"></view>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	const cardList = ref<string[]>([
		'/static/image/Z1.jpg',
		'/static/image/Z2.jpg',
		'/static/image/Z3.jpg',
		'/static/image/Z4.jpg',
		'/static/image/Z5.jpg'
	])
	const cardList1 = ref<string[]>([
		'/static/image/D1.jpg',
		'/static/image/D2.jpg',
		'/static/image/D3.jpg',
		'/static/image/D4.jpg'
	])
	const left = () => {
		console.log('left')
	}

	const right = () => {
		console.log('right')
	}

	const center = () => {
		console.log('center')
	}
</script>

t-drop-card-item Props ​

属性名类型默认值说明可选值
sizeString""组件尺寸large, medium, small, mini
typeString""组件类型info, primary, error, warning, success
disabledBooleanfalse组件是否禁用true, false
hoverBooleanfalse是否有点击效果true, false
pathString""点击组件后跳转的页面路径-
effectString""组件显示主题normal, dark, light, plain

t-drop-card-item Events ​

事件名说明回调参数
click点击时触发-
transitionend动画结束时触发-
touchstart触摸开始时触发触摸事件对象
touchend触摸结束时触发触摸事件对象
touchmove触摸移动时触发触摸事件对象
touchcancel触摸取消时触发触摸事件对象

t-drop-card-item Slots ​

插槽名说明
default卡片内容插槽，用于放置卡片的具体内容