当前位置：首页 > VUE

vue实现外卖页面

2026-02-17 15:19:48VUE

实现外卖页面的核心步骤

页面结构与组件划分 外卖页面通常分为顶部导航栏、商品分类侧边栏、商品列表和购物车组件。使用Vue的单文件组件(SFC)模式进行模块化开发。

数据管理与状态共享 采用Vuex或Pinia管理全局状态，包括商品数据、购物车状态和用户选择。商品数据通过API异步获取并存储在store中。

// store示例(Pinia)
export const useFoodStore = defineStore('food', {
  state: () => ({
    foods: [],
    cart: []
  }),
  actions: {
    async fetchFoods() {
      this.foods = await api.get('/foods')
    }
  }
})

关键功能实现方案

商品分类联动 侧边栏分类与商品列表实现滚动联动效果。使用Intersection Observer API监测元素位置，或通过计算scrollTop值实现。

// 分类高亮逻辑
const activeCategory = ref(0)
const onScroll = () => {
  const scrollTop = container.value.scrollTop
  categoryOffsets.value.forEach((offset, index) => {
    if (scrollTop >= offset) activeCategory.value = index
  })
}

购物车功能 购物车组件需要实现添加/删除商品、数量增减和金额计算。使用Vue的响应式系统自动更新视图。

<!-- 购物车模板示例 -->
<div v-for="item in cart" :key="item.id">
  <span>{{ item.name }}</span>
  <button @click="decrement(item)">-</button>
  <span>{{ item.quantity }}</span>
  <button @click="increment(item)">+</button>
</div>

性能优化技巧

虚拟滚动技术 商品列表采用虚拟滚动解决大量DOM渲染问题。使用vue-virtual-scroller等库实现。

// 安装虚拟滚动库
import { RecycleScroller } from 'vue-virtual-scroller'
components: { RecycleScroller }

图片懒加载 商品图片使用Intersection Observer实现懒加载，减少初始请求压力。

<img v-lazy="food.image" alt="food">

完整项目结构参考

src/
├── components/
│   ├── NavBar.vue
│   ├── CategorySidebar.vue
│   ├── FoodList.vue
│   └── ShoppingCart.vue
├── stores/
│   └── food.js
├── views/
│   └── Takeaway.vue
└── utils/
    └── scroll.js

vue实现外卖页面