当前位置：首页 > VUE

vue实现双列商品卡片

2026-02-22 09:53:40VUE

实现双列商品卡片布局

使用Vue实现双列商品卡片布局可以通过Flex布局或Grid布局完成。以下是一个基于Flex布局的示例：

<template>
  <div class="product-list">
    <div 
      v-for="(product, index) in products" 
      :key="index" 
      class="product-card"
    >
      <img :src="product.image" :alt="product.name">
      <h3>{{ product.name }}</h3>
      <p>¥{{ product.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '商品1', price: 99, image: 'url1' },
        { name: '商品2', price: 199, image: 'url2' },
        // 更多商品...
      ]
    }
  }
}
</script>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

.product-card {
  width: calc(50% - 8px);
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
</style>

使用CSS Grid布局替代方案

如果需要更灵活的网格控制，可以使用CSS Grid：

vue实现双列商品卡片

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.product-card {
  /* 保持与Flex方案相同的样式 */
}

响应式设计处理

添加媒体查询实现响应式布局：

vue实现双列商品卡片

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: 1fr;
  }

  .product-card {
    width: 100%;
  }
}

动态加载更多商品

结合分页加载功能：

methods: {
  loadMore() {
    // 模拟API获取更多数据
    this.products = [...this.products, ...newProducts]
  }
}

性能优化建议

对于长列表考虑使用虚拟滚动：

<template>
  <RecycleScroller
    class="product-list"
    :items="products"
    :item-size="200"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div class="product-card">
        <!-- 卡片内容 -->
      </div>
    </template>
  </RecycleScroller>
</template>

需要先安装vue-virtual-scroller插件。这种方案特别适合移动端长列表场景。