目录

前言一、布局分析二、布局设计2.1、整体设计2.2、Swipe 轮播图2.3、Header 标题栏2.4、Nav 标签导航栏2.5、Goods 商品页面

 资源下载与学习

前言

H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。

本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。

项目代码正在gitee同步更新中，项目地址：https://gitee.com/airheaven/kfg-vue，学习前请大家给个star哦

一、布局分析

在上一章，我们已经搭建好了项目的基础框架并使用了vm作为移动端的适配方案，下一步，我们开始设计布局，打开肯德基点餐小程序，分析这个页面的布局。

页面可以分为：

轮播图：循环播放商品图和活动；Header：用于存放标题文字，比如店名、地址等内容，可以做一个折叠面板；标签页：用于在不同的内容区域之间进行切换，可以放：菜单、评价、关于我们等；侧边导航：垂直展示的导航栏，用于在不同的内容区域之间进行切换，是菜单标签页里的内容；内容区域：瀑布流滚动加载，展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项，是菜单标签页里的内容。

二、布局设计

2.1、整体设计

分析完布局，我们可以开始行动了，首先删除之前测试使用的Father.vue和Todolist.vue，然后新建一些文件夹，并分别新建Goods.vue、Header.vue、Nav.vue、Swipe.vue如下： Goods.vue中放商品列表：

Header.vue中放标题栏：

Nav.vue中放标签导航栏：

Swipe.vue中放一个简单的轮播图demo：

我们在App.vue中将这几个组件引入进行初步排列：

除此之外，还要在router中配置路由，默认路由首先指向商品页面Goods.vue，在src/router/index.ts配置如下：

// src/router/index.ts

/**

* createRouter 这个为创建路由的方法

* createWebHashHistory 这个就是vue2中路由的模式，

* 这里的是hash模式，这个还可以是createWebHistory等

* RouteRecordRaw 这个为要添加的路由记录，也可以说是routes的ts类型

*/

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

// 路由记录，这个跟vue2中用法一致，就不做过多解释了

const routes: Array = [

{

path: "/",

name: "Goods",

component: () => import("@/components/goods/Goods.vue"),

alias: "/goods",

meta: {

title: "商品页面",

},

},

];

const router = createRouter({

history: createWebHashHistory(),

routes,

});

export default router;

如此，布局就基本完成了，npm run dev运行后显示，而后我们来设计一下各个部分的组件。

2.2、Swipe 轮播图

首先我们要实现的是最顶端的轮播图，我们可以使用Vant中的Swipe组件，:autoplay设置为3000，即3秒自动切换下一张，设置lazy-render懒加载，在懒加载模式下，只会渲染当前页和下一页，可以实现延迟加载页面可视区域外的内容，从而使页面加载更流畅。。

将要展示的静态图像copy到src/asserts文件夹中 然后修改Swipe.vue，读取图像：

显示如下：

2.3、Header 标题栏

标题栏主体内容主要分为4部分进行设计，我们首先设计了一个滚动通知，利用swipe组件完成，然后左侧一个图标、一个餐厅主名字（名字后面接一个可切换餐厅地点的图标）和餐厅描述，切换餐厅时弹出popup组件用以选择，通过一个show组件进行绑定，弹出层的内容和这里的其他细节我们后面继续设计，这里给出一个大致的框架，供大家参考学习和扩展（如还可以扩展读取地理信息计算距离，预约用餐时间，更改为外卖模式等等） Header.vue代码如下：

2.4、Nav 标签导航栏

标签导航栏使用到router-link进行路由改变和跳转，Nav.vue代码如下：

router-link可以指向另外两项（自在厨房和关于我们），所以我们需要在component中新建两个文件夹并新建文件，分别是Kitchen.vue和About.vue，将其简单初始化一下，然后在router/index.ts中添加路由：

{

path: "/",

name: "Kitchen",

component: () => import("@/components/kitchen/Kitchen.vue"),

alias: "/kitchen",

meta: {

title: "自在厨房",

},

},

{

path: "/",

name: "About",

component: () => import("@/components/about/About.vue"),

alias: "/about",

meta: {

title: "关于我们",

},

},

成功添加后，效果如下：

2.5、Goods 商品页面

下面我们设计主要的商品页面，商品页面主要分为侧边导航栏和一个可以下滑的商品列表，侧边导航栏点击后，触发对应事件，商品列表自动下滑到对应的位置（这一步后面做）。

首先简单搭建页面，代码如下：

运行效果如下： 当然，这个页面都还没有写逻辑，我们将在后面依次完善。Node.js和MongoDB也将在后续进行搭建。

 资源下载与学习

本部分的代码已上传至CSDN：类肯德基自助点餐系统02 - 页面布局(Vue3.2 + Vite + TS + Vant + Pinia + MongoDB）

项目代码正在gitee同步更新中，请大家给个star，项目地址：https://gitee.com/airheaven/kfg-vue

 支持我：点赞+收藏⭐️+留言

精彩链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：