vue实现商品卡片列表

实现商品卡片列表的基本结构

使用 Vue 的 v-for 指令循环渲染商品卡片列表。确保数据来源于一个数组，并通过 props 或直接绑定数据到组件。

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-card">
      <img :src="product.image" :alt="product.name" />
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <span class="price">¥{{ product.price }}</span>
      <button @click="addToCart(product)">加入购物车</button>
    </div>
  </div>
</template>

数据定义与初始化

在 Vue 组件的 data 或 props 中定义商品数据。如果是动态数据，可以通过 API 请求获取。

<script>
export default {
  data() {
    return {
      products: [
        {
          id: 1,
          name: "商品1",
          description: "商品描述",
          price: 99.9,
          image: "https://example.com/product1.jpg"
        },
        {
          id: 2,
          name: "商品2",
          description: "商品描述",
          price: 199.9,
          image: "https://example.com/product2.jpg"
        }
      ]
    };
  },
  methods: {
    addToCart(product) {
      // 处理加入购物车逻辑
      console.log("Added to cart:", product);
    }
  }
};
</script>

样式设计与布局

使用 CSS 或 CSS 框架（如 Tailwind、Bootstrap）美化商品卡片列表。确保布局适配不同屏幕尺寸。

<style scoped>
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

.price {
  font-weight: bold;
  color: #e63946;
  display: block;
  margin: 10px 0;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>

动态加载商品数据

通过 API 请求动态加载商品数据，使用 axios 或其他 HTTP 客户端库。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: []
    };
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/products');
      this.products = response.data;
    } catch (error) {
      console.error("Failed to fetch products:", error);
    }
  }
};
</script>

分页与加载更多功能

实现分页或无限滚动加载更多商品的功能，提升用户体验。

<script>
export default {
  data() {
    return {
      products: [],
      page: 1,
      loading: false,
      hasMore: true
    };
  },
  methods: {
    async loadMore() {
      if (this.loading || !this.hasMore) return;
      this.loading = true;
      try {
        const response = await axios.get(`https://api.example.com/products?page=${this.page}`);
        if (response.data.length === 0) {
          this.hasMore = false;
        } else {
          this.products = [...this.products, ...response.data];
          this.page++;
        }
      } catch (error) {
        console.error("Failed to load more products:", error);
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
        this.loadMore();
      }
    });
  }
};
</script>

商品筛选与排序

添加筛选和排序功能，允许用户按价格、类别等条件筛选商品。

<template>
  <div>
    <div class="filters">
      <select v-model="sortBy" @change="sortProducts">
        <option value="price_asc">价格从低到高</option>
        <option value="price_desc">价格从高到低</option>
      </select>
    </div>
    <div class="product-list">
      <!-- 商品卡片列表 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sortBy: 'price_asc'
    };
  },
  methods: {
    sortProducts() {
      if (this.sortBy === 'price_asc') {
        this.products.sort((a, b) => a.price - b.price);
      } else if (this.sortBy === 'price_desc') {
        this.products.sort((a, b) => b.price - a.price);
      }
    }
  }
};
</script>