情怀爆棚！深度拆解2020版Vue仿探探拖拽卡片效果，探秘飞卡技术！

前端

2023-09-19 18:04:07

缘起

前些日子，我对现如今社交App上的卡片滑动效果颇有兴趣，决心一试。于是，我基于Vue.js框架，利用业余时间，开发了这款2020版Vue仿探探拖拽卡片组件。

组件不仅实现了和探探一样流畅的卡片滑动效果，而且增加了酷炫的飞卡效果。

这款组件的诞生，得益于我对前端开发的浓厚兴趣。初次接触前端开发，便被其展现的强大功能所深深折服。从此，我便踏上了前端开发的探索之旅。

组件详情

组件基于Vue.js框架，充分利用了Vue.js的响应式数据特性，实现了卡片拖拽时的实时反馈。

卡片滑动时，会根据手指的滑动方向和速度，计算出卡片的运动轨迹，并通过CSS3的transform属性实现卡片的平滑移动。

飞卡效果

飞卡效果是本组件的一大亮点。当卡片被拖拽到一定位置时，会触发飞卡效果。

此时，卡片会以抛物线的方式飞出屏幕，并消失不见。这种飞卡效果，灵感来源于我的女神邱淑贞在电影《赌神》中的经典镜头。

组件优势

易于使用，即插即用
兼容性强，支持各种主流浏览器
性能优异，卡片滑动流畅无卡顿
可定制性强，可根据需要进行二次开发

展望未来

我将继续对组件进行优化和完善，并计划在近期开源组件代码，以便更多开发者能够使用和学习。

同时，我也会继续探索前端开发领域的新技术，为开发出更多优秀的前端组件而努力。

欢迎交流

如果你对组件有任何疑问或建议，欢迎在下方留言。我将尽力为你解答和改进。

代码示例

<template>
  <div class="tinder-card">
    <img :src="card.image" alt="Card image">
    <div class="card-info">
      <p>{{ card.name }}</p>
      <p>{{ card.age }}</p>
      <p>{{ card.location }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['card'],
  data() {
    return {
      dragging: false,
      dragX: 0,
      dragY: 0
    }
  },
  methods: {
    onDragStart(e) {
      this.dragging = true;
      this.dragX = e.clientX;
      this.dragY = e.clientY;
    },
    onDragMove(e) {
      if (!this.dragging) return;

      const dx = e.clientX - this.dragX;
      const dy = e.clientY - this.dragY;

      this.card.x += dx;
      this.card.y += dy;

      this.dragX = e.clientX;
      this.dragY = e.clientY;
    },
    onDragEnd(e) {
      this.dragging = false;

      if (this.card.x > window.innerWidth * 0.5) {
        this.$emit('swipeRight', this.card);
      } else if (this.card.x < window.innerWidth * -0.5) {
        this.$emit('swipeLeft', this.card);
      } else {
        this.card.x = 0;
        this.card.y = 0;
      }
    }
  }
}
</script>