当前位置：首页 > VUE

vue 实现货架效果

2026-02-21 07:57:44VUE

Vue 实现货架效果

数据结构设计

使用数组存储货架上的商品信息，每个商品包含名称、图片、价格等属性。示例数据结构如下：

data() {
  return {
    shelves: [
      { id: 1, name: '商品A', image: 'product_a.jpg', price: 99 },
      { id: 2, name: '商品B', image: 'product_b.jpg', price: 149 }
    ]
  }
}

网格布局实现

使用CSS Grid或Flexbox创建货架网格布局，通过v-for指令动态渲染商品：

vue 实现货架效果

<div class="shelf-container">
  <div v-for="item in shelves" :key="item.id" class="shelf-item">
    <img :src="item.image" :alt="item.name">
    <h3>{{ item.name }}</h3>
    <p>¥{{ item.price }}</p>
  </div>
</div>

样式设置

为货架添加基本样式，包括间距、边框和悬停效果：

.shelf-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.shelf-item {
  border: 1px solid #ddd;
  padding: 15px;
  transition: transform 0.3s;
}

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

交互功能实现

添加商品点击事件和购物车功能：

vue 实现货架效果

methods: {
  addToCart(item) {
    this.$emit('add-to-cart', item)
  }
}

<button @click="addToCart(item)">加入购物车</button>

响应式设计

通过媒体查询确保在不同设备上正常显示：

@media (max-width: 768px) {
  .shelf-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .shelf-container {
    grid-template-columns: 1fr;
  }
}

动画效果增强

使用Vue的过渡组件为商品添加入场动画：

<transition-group name="shelf" tag="div" class="shelf-container">
  <div v-for="item in shelves" :key="item.id" class="shelf-item">
    <!-- 商品内容 -->
  </div>
</transition-group>

.shelf-enter-active, .shelf-leave-active {
  transition: all 0.5s ease;
}
.shelf-enter-from, .shelf-leave-to {
  opacity: 0;
  transform: translateY(30px);
}