介绍：美食杰首页

先看首页里最核心的两个模块：轮播图和内容精选。轮播图这块，用的是 Element UI 的组件，配合 Vue 的指令和 data 数据交互，效果就是下面这样——左右滑动切换，自动播放，底部的指示点也会跟着动。

内容精选页则更像是一个瀑布流式的菜单列表，同样基于 Element UI 的布局组件搭建，数据和视图的绑定方式也类似。看截图，卡片式排列，每张卡片展示一道菜品，点击还能跳转详情。

过程：

实现这两个功能，核心思路是：先把 Element UI 装好，在 main.js 里全局引入，后面所有组件就能直接用了。

import elementUi from 'element-ui'
import  'element-ui/lib/theme-chalk/index.css'
Vue.use(elementUi)

HTML 结构没什么花哨的，就是常规的 el-carousel 和 el-card 组合。这里贴一下关键部分的截图，可以对照着看。

CSS 样式主要控制轮播图的高度、卡片间距，以及响应式布局。这部分其实没有太多可说的，重点在于样式要跟 Element UI 的默认主题搭配好。

数据交互才是重头戏。这里需要搭配两个自定义组件：MenuCard 和 Waterfall（瀑布流组件）。另外还封装了两个 API 方法：getBanner 获取轮播图数据，getMenus 获取菜单列表。来看一下 home 组件的完整逻辑：

注意看注释里的两个关键点：第一次请求拿到第一页数据；滚动到底部时触发 loadingMenuHanle，页码加1，再请求下一页数据并追加到 menuList 里。同时通过 $refs 控制瀑布流组件的加载状态，避免重复请求。

注意事项：

有几个容易踩坑的地方。首先，引入 Element UI 时一定要确认 CSS 路径正确——从 element-ui 文件夹开始逐层核对，老版本用的是 theme-default，新版本改成了 theme-chalk，千万别写错。另外，el-carousel 默认是垂直滚动的，如果想改成水平滑动，需要显式设置 direction: 'horizontal'，这个属性容易忽略。

总结：

说一下轮播图的实现原理，其实挺巧妙的：把源数据复制一份，将最后一条数据插入到最前面，再将第一条数据复制到最后面。这样当图片滑到首尾时，通过重置下标，视觉上就实现了无缝无限滚动。

以上就是一个美食项目首页中轮播图和内容精选页的核心实现思路，从组件安装、数据交互到滚动加载，每一步都算得上典型。如果你也在做类似的功能，希望这些代码和注释能帮你少走弯路。

《夸克》非常好用的免费AI浏览器

下载APP查看