当前位置：首页 > uni-app

uniapp 外卖页

2026-02-06 02:28:10uni-app

开发外卖页面的基本结构

使用uniapp开发外卖页面，通常需要构建一个包含商家列表、商品分类、购物车等核心功能的界面。页面结构可采用scroll-view实现纵向滚动，左侧为分类导航，右侧为商品列表，底部固定购物车栏。

<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input placeholder="搜索商家或商品" />
    </view>

    <!-- 主体内容 -->
    <scroll-view scroll-y class="main-content">
      <!-- 商家列表或商品分类 -->
      <view class="category-list"></view>
      <view class="product-list"></view>
    </scroll-view>

    <!-- 底部购物车 -->
    <view class="cart-bar"></view>
  </view>
</template>

实现分类联动效果

分类联动是外卖页面的关键交互，左侧点击分类时右侧自动滚动到对应商品区域。可通过uni.createSelectorQuery()获取DOM节点位置信息，结合scroll-view的scrollTo方法实现。

uniapp 外卖页

methods: {
  handleCategoryClick(index) {
    const query = uni.createSelectorQuery().in(this)
    query.select(`#group-${index}`).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(res => {
      this.scrollTop = res[1].scrollTop + res[0].top
    })
  }
}

购物车功能实现

购物车需要全局状态管理，建议使用vuex存储已选商品。核心功能包括添加商品、计算总价、批量删除等。底部购物车栏应显示选中数量和总价，点击可展开详情列表。

uniapp 外卖页

// store.js
state: {
  cartItems: []
},
mutations: {
  addToCart(state, item) {
    const existing = state.cartItems.find(i => i.id === item.id)
    existing ? existing.count++ : state.cartItems.push({...item, count: 1})
  }
}

性能优化建议

长列表渲染使用<recycle-list>组件提升性能，避免DOM节点过多。图片资源采用懒加载，分类数据分页请求。购物车频繁操作可使用防抖函数减少计算频次。

// 图片懒加载示例
<image lazy-load :src="item.image" />

// 防抖函数应用
import { debounce } from 'lodash'
methods: {
  updateCart: debounce(function(){
    // 更新逻辑
  }, 300)
}

样式与交互细节

分类选中状态需高亮显示，商品卡片应有价格和销量信息。购物车按钮建议使用悬浮设计，添加商品时应有动画反馈。整体配色应符合餐饮行业特征，常用暖色调为主。

/* 分类选中样式 */
.active-category {
  color: #ff5335;
  border-left: 4px solid #ff5335;
}

/* 添加商品动画 */
@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.add-animation {
  animation: bounce 0.5s;
}