更新记录

1.1.1（2026-08-24）

init

平台兼容性

uni-app x(5.07)

其他

c-swipe-card

面向 uni-app x 蒸汽模式（Vapor） 的卡片堆组件，提供类似探探的左滑/右滑交互。

特性

• 手指拖动时实时位移、旋转，并显示 LIKE / NOPE 状态
• 未超过阈值自动回弹，超过阈值后飞出并切换下一张
• 仅渲染有限数量的后备卡片，适合 App 原生渲染
• 支持按钮调用 swipeLeft()、swipeRight() 和 reset()
• 不依赖三方库，不申请权限，也不采集数据

基础用法

组件符合 easycom 目录规范，导入后无需手动注册。

<template>
    <c-swipe-card
        ref="swipeCardRef"
        :cards="cards"
        :card-height="520"
        :threshold="96"
        @change="onCardChange"
        @empty="onCardEmpty"
    ></c-swipe-card>
</template>

<script setup lang="uts">
    import {
        CSwipeCardChangeEvent,
        CSwipeCardItem
    } from '@/uni_modules/cdesign-swipe-card/components/c-swipe-card/types.uts'

    const cards = ref<CSwipeCardItem[]>([
        {
            id: '1',
            image: 'https://example.com/photo.jpg',
            title: '小夏',
            age: 24,
            subtitle: '产品设计师',
            description: '周末喜欢徒步和看展',
            distance: '2.4 km',
            tags: ['摄影', '咖啡']
        }
    ])

    const swipeCardRef = ref<ComponentPublicInstance | null>(null)

    function onCardChange(event: CSwipeCardChangeEvent) {
        console.log(event.direction, event.card.id)
    }

    function onCardEmpty() {
        console.log('卡片已浏览完')
    }

    function dislike() {
        swipeCardRef.value?.$callMethod('swipeLeft')
    }

    function like() {
        swipeCardRef.value?.$callMethod('swipeRight')
    }
</script>

在蒸汽模式 easycom 组件中，也可以使用组件强类型 ref 直接调用公开方法。示例使用 $callMethod，便于复制到不同项目结构中。

Props

Events

change.direction 为 left 或 right，并会返回原始 card 和对应 index。

Methods

数据结构

type CSwipeCardItem = {
    id: string
    image: string
    title: string
    age?: number
    subtitle?: string
    description?: string
    distance?: string
    tags?: string[]
}

平台与说明

• 推荐 HBuilderX 5.07 及以上、uni-app x 蒸汽模式。
• 组件本身不发起网络请求；示例中的网络图片由业务项目自行加载。
• uni-app x 的 view 默认使用 overflow: hidden。组件根节点已经设置为 overflow: visible；如果业务侧在组件外额外包裹了 view，也需要给这些包裹层设置 overflow: visible，否则卡片超出包裹层后仍会被裁切。
• 组件标签为 <c-swipe-card>，uni_modules 插件 ID 为 cdesign-swipe-card。发布前请确认该插件 ID 未被占用，并在 HBuilderX 发布窗口补充作者联系方式、截图和服务条款。

商业授权

本组件为商业授权组件，不再采用 MIT 开源协议。购买者可在插件市场订单约定的授权项目中使用；未经书面许可，不得公开源码、转售、共享授权或将组件作为同类插件再次发布。

普通授权版和源码授权版的具体权利、限制及免责声明，请阅读插件根目录的 license.md。交易和 AppID/包名绑定规则同时以 DCloud 插件市场订单及相关协议为准。

/* 使用方的直接父容器不能裁切正在飞出的卡片。 */
.card-wrapper {
    overflow: visible;
}