轻松在 Vue 中打造商城的楼层效果

前端

2023-09-27 14:28:19

在 Vue 中巧妙实现商城的楼层效果：提升购物体验，打造非凡交互

当您在网上购物时，楼层效果无处不在。它使您能够轻松浏览不同类别或品牌的商品，帮助您快速找到所需商品，大幅提高您的购物效率。本文将深入探讨如何在 Vue 中巧妙实现商城的楼层效果，为您提供逐步指导，让您的电商网站脱颖而出。

什么是楼层效果？

楼层效果是一个直观的界面元素，它将产品按类别或品牌划分为不同楼层。用户可以单击楼层选项卡或使用滚动条在不同楼层之间导航。

Vue 中实现楼层效果的步骤

1. 创建 Vue 组件

首先，我们创建一个名为 Floor 的 Vue 组件，它将用于表示每个楼层。在 Floor.vue 文件中，包含以下代码：

<template>
  <div class="floor">
    <h2 class="floor-title">{{ floor.title }}</h2>
    <ul class="floor-list">
      <li class="floor-item" v-for="product in floor.products" :key="product.id">
        <a href="#">{{ product.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    floor: {
      type: Object,
      required: true
    }
  }
};
</script>

<style>
.floor {
  margin-bottom: 30px;
}

.floor-title {
  font-size: 24px;
  margin-bottom: 15px;
}

.floor-list {
  display: flex;
  flex-wrap: wrap;
}

.floor-item {
  width: 25%;
  margin-right: 10px;
  margin-bottom: 10px;
}

.floor-item a {
  display: block;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}
</style>

此组件接收 floor 属性，其中包含有关楼层的信息，例如标题和产品列表。

2. 在 Vue 页面中使用 `Floor` 组件

接下来，在 Vue 页面中使用 Floor 组件来创建楼层效果。例如，在 Home.vue 文件中：

<template>
  <div class="home">
    <Floor v-for="floor in floors" :key="floor.id" :floor="floor" />
  </div>
</template>

<script>
import Floor from './Floor.vue';

export default {
  components: {
    Floor
  },
  data() {
    return {
      floors: [
        {
          id: 1,
          title: '一楼',
          products: [
            {
              id: 1,
              name: '商品 1'
            },
            {
              id: 2,
              name: '商品 2'
            },
            {
              id: 3,
              name: '商品 3'
            }
          ]
        },
        {
          id: 2,
          title: '二楼',
          products: [
            {
              id: 4,
              name: '商品 4'
            },
            {
              id: 5,
              name: '商品 5'
            },
            {
              id: 6,
              name: '商品 6'
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.home {
  margin: 0 auto;
  max-width: 1200px;
}
</style>

3. 处理页面滚动

为了使楼层效果正常工作，我们需要处理页面滚动。在 Home.vue 中添加以下代码：

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const floors = document.querySelectorAll('.floor');
    for (let i = 0; i < floors.length; i++) {
      const floor = floors[i];
      const floorTop = floor.offsetTop;
      const floorBottom = floorTop + floor.offsetHeight;
      if (window.pageYOffset >= floorTop && window.pageYOffset < floorBottom) {
        this.activeFloor = i;
        break;
      }
    }
  }
}

此代码监听页面滚动，并确定当前所在的楼层。

4. 高亮显示当前楼层

最后，我们需要在 Floor 组件中高亮显示当前楼层。在 Floor.vue 中添加以下代码：

computed: {
  isActive() {
    return this.floor.id === this.$parent.activeFloor;
  }
}

<template>
  <div class="floor" :class="{ 'floor--active': isActive }">
    <h2 class="floor-title">{{ floor.title }}</h2>
    <ul class="floor-list">
      <li class="floor-item" v-for="product in floor.products" :key="product.id">
        <a href="#">{{ product.name }}</a>
      </li>
    </ul>
  </div>
</template>