更新记录

0.0.4（2025-07-15） 下载此版本

0.0.4

0.0.3（2025-07-15） 下载此版本

增加回调

0.0.2（2025-07-13） 下载此版本

0.0.2

平台兼容性

云端兼容性

uni-app(4.55)

uni-app x(4.55)

q-cardFlyOut 卡片飞出组件

滑动卡片（Tinder 风格）组件，可支持 左右/上下 四个方向拖拽飞出，常用于推荐、刷卡等场景、类似于 探探 的交互风格。

快速开始

<template>
  <view class="page">
    <qCardFlyOut
      ref="fly"
      :list="cards"
      :visible="3"
      :thresholdRate="0.3"
      :loadMoreOffset="4"
      width="750rpx"
      height="900rpx"
      :directions="['left', 'right', 'up', 'down']"
      @swipe="onSwipe"
      @swipingLeft="onSwipingLeft"
      @swipingRight="onSwipingRight"
      @swipingUp="onSwipingUp"
      @swipingDown="onSwipingDown"
      @cancelLeft="onCancelLeft"
      @cancelRight="onCancelRight"
      @cancelUp="onCancelUp"
      @cancelDown="onCancelDown"
      @loadMore="onLoadMore"
      @cardClick="onCardClick"
    >
      <!-- 默认插槽：卡片内容 -->
      <template #default="{ item }">
        <image :src="item.cover" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 24rpx" />
      </template>

      <!-- footer 插槽：可放操作按钮等 -->
      <template #footer>
        <view class="btn-group">
          <button @click="swipeLeft">左滑</button>
          <button @click="swipeRight">右滑</button>
          <button @click="swipeUp">上滑</button>
          <button @click="swipeDown">下滑</button>
        </view>
      </template>
    </qCardFlyOut>
  </view>
</template>

<script>
import qCardFlyOut from '@/uni_modules/q-cardFlyOut/components/q-cardFlyOut/q-cardFlyOut.vue'

export default {
  components: { qCardFlyOut },
  data() {
    return {
      cards: []
    };
  },
  created() {
    this.cards = fetchCards(); // 拉取初始数据
  },
  methods: {
    /* 回调示例 */
    onSwipe({ direction, currentIndex, currentItem }) {},
    onSwipingLeft(e) {},
    onSwipingRight(e) {},
    onSwipingUp(e) {},
    onSwipingDown(e) {},
    onCancelLeft(e) {},
    onCancelRight(e) {},
    onCancelUp(e) {},
    onCancelDown(e) {},
    onLoadMore() {},
    onCardClick({ currentItem }) {},

    /* 手动触发 */
    swipeLeft() { this.$refs.fly.swipeLeft(); },
    swipeRight() { this.$refs.fly.swipeRight(); },
    swipeUp() { this.$refs.fly.swipeUp(); },
    swipeDown() { this.$refs.fly.swipeDown(); }
  }
};
</script>

📌 示例仅演示基本用法，实际请按需调整样式与交互逻辑。

Props

Events

Slots

方法

通过 ref 获取组件实例后调用上述方法，例如：

this.$refs.fly.swipeLeft();
this.$refs.fly.manualSwipe('down');

样式定制

组件本身仅提供基础布局与过渡效果，大部分视觉样式请在插槽内实现，以便保持灵活性。

注意事项

1. 组件会在原始 list 中注入临时字段 x、y，若对此有顾虑请 deep copy 数据。
2. 请勿在 list 中直接使用响应式 ref 对象，推荐使用普通对象。
3. 若卡片内容存在交互元素（按钮、链接等）需要阻止冒泡，请自行 @click.stop 处理。