Vue.js 代码实现服装搭配卡片

应用场景介绍

该 Vue.js 代码段实现了服装搭配卡片，展示了多种服装搭配理念，方便用户浏览和获取搭配灵感。

代码基本功能介绍

• 展示多个服装搭配横幅，可左右滑动切换。
• 提供服装类别选择，方便用户按类别查找搭配。
• 展示推荐产品，用户可点击查看详情。

功能实现步骤及关键代码分析说明

1. 初始化数据

const data = ref({
  banners: [...],
  categories: [...],
  products: [...],
});

使用 Vue.js 的 ref 钩子初始化响应式数据，其中 banners、categories 和 products 分别代表服装搭配横幅、类别和推荐产品的数据数组。

2. 渲染横幅

<div class="relative">
  <img
    src="..."
    alt=""
    class="w-full h-full object-cover"
  />
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="flex items-center">
      <van-icon name="arrow-left" class="text-white" size="24" />
      <van-icon name="mail" class="text-white ml-4" size="24" />
      <van-icon name="arrow-right" class="text-white ml-4" size="24" />
    </div>
  </div>
</div>

这段代码渲染了服装搭配横幅，包括背景图片、左右箭头和邮件图标。背景图片使用 img 标签，左右箭头和邮件图标使用 van-icon 组件。

3. 渲染类别

<div class="flex flex-wrap justify-center gap-4 p-4">
  <div
    class="w-20 h-20 rounded-full bg-gray-300 flex items-center justify-center"
  >
    <span class="text-gray-600 font-medium">New In</span>
  </div>
  ...
</div>

这段代码渲染了服装类别，每个类别是一个圆形卡片，包含类别名称。圆形卡片使用 div 元素，类别名称使用 span 元素。

4. 渲染推荐产品

<div class="flex items-center justify-center gap-4 p-4">
  <div
    class="w-20 h-20 rounded-full bg-gray-300 flex items-center justify-center"
  >
    <img
      src="..."
      alt=""
      class="w-12 h-12 rounded-full object-cover"
    />
  </div>
  ...
</div>

这段代码渲染了推荐产品，每个产品是一个圆形卡片，包含产品图片。圆形卡片使用 div 元素，产品图片使用 img 元素。

5. 实现左右滑动切换横幅

// ...

const currentBannerIndex = ref(0);

const swipeLeft = () => {
  currentBannerIndex.value--;
  if (currentBannerIndex.value < 0) {
    currentBannerIndex.value = data.value.banners.length - 1;
  }
};

const swipeRight = () => {
  currentBannerIndex.value++;
  if (currentBannerIndex.value >= data.value.banners.length) {
    currentBannerIndex.value = 0;
  }
};

这段代码实现了左右滑动切换横幅的功能。使用 currentBannerIndex 响应式变量记录当前横幅的索引，并使用 swipeLeft 和 swipeRight 方法实现左右滑动。

总结与展望

通过这段代码，我们实现了服装搭配卡片的基本功能，为用户提供了便捷的搭配浏览和获取灵感的方式。

未来，该卡片功能可以进一步拓展和优化：

• **添加更多交互：**如允许用户收藏搭配、分享搭配等。
• **个性化推荐：**根据用户浏览历史和偏好，推荐更加匹配的搭配。
• **整合电商功能：**直接在卡片中购买搭配中的产品。