从零搭建首页（完整案例）

本篇用 真实操作顺序 带你在 UI 编辑器里搭一个可用的校园首页。

用真实操作顺序带你在 UI 编辑器里搭一个可用的校园首页。预计耗时 30～60 分钟（含上传图片）。

UI管理 → 页面配置·运营 / UI 编辑人员

目标效果

透明导航+顶图 → 轮播图 → 金刚区(4列) → 搜索栏 → 模块标题+话题气泡 → 模块标题+筛选标签+笔记列表 → 结束文本

第 0 步：前置条件

• 管理后台 H5 浏览器打开，已登录超级管理员
• 系统设置 → 我的模块 中 UI 配置已开通
• 系统配置 → 文件存储 已保存且测试通过
• 本案例用平台默认；多校区请先配置区域管理

第 1 步：创建首页配置

1. 1
   进入页面配置UI管理 → 页面配置
2. 2
   选择区域顶部区域选平台默认
3. 3
   新建页面+ 新建页面 → 类型选首页（不是功能页）
4. 4
   命名并编辑页面名称填「平台首页 v1」→ 创建并编辑

第 2 步：页面级设置

点击画布空白处，右侧出现页面配置。

页面背景颜色#F5F5F5

顶部背景图 / 背景图高度上传 750×400 左右头图 / 400 rpx

导航栏样式默认 或 胶囊

分享标题 / 分享图片欢迎来到 XX 校园 / 5:4 比例图

页面级配置说明文档

第 3 步：添加轮播图

1. 1
   添加组件左侧布局导航 → 轮播图
2. 2
   上传图片属性 → 图片列表 → + 添加图片，上传 3 张 Banner
3. 3
   配置跳转每张图配置点击动作（活动自定义页、投票列表等）
4. 4
   播放与指示器自动播放开、间隔 3000ms、循环开；指示器显示、底部居中
5. 5
   样式高度 300 rpx，左右 margin 各 24 rpx

轮播图组件手册文档

第 4 步：金刚区

样式 Tab：marginTop 20，paddingBottom 16

列数 / 图标大小 / 行间距4 / 88 rpx / 24 rpx

二手闲置 / 跑腿 / 投票 / 校园活动各配置图标与点击动作（闲置列表、跑腿服务、投票活动、自定义活动页）

金刚区组件手册文档

第 5 步：搜索栏

样式：margin 左右 24，marginBottom 16

占位符搜索笔记、圈子、用户

点击动作跳转搜索页（从路由选择器选）

搜索栏组件手册文档

第 6 步：话题模块

线上话题数据自动拉取，编辑器内为演示布局。

1. 1
   模块标题基础元素 → 模块标题；标题「热门话题」，开启更多 → 热门话题榜
2. 2
   话题气泡社区内容 → 话题气泡；标题改为「大家都在聊」；圆角 999、背景 #FFFFFF

模块标题组件手册文档

话题气泡组件手册文档

第 7 步：筛选标签 + 笔记列表（联动）

首页最核心一步，须保证联动 Key 一致。

笔记列表与圈子列表/瀑布流三选一；将笔记列表移到画布最底部。

1. 1
   添加筛选标签布局导航 → 筛选标签；内容模式 API 联动；联动目标笔记；联动标识 home-feed
2. 2
   添加 Tab 项推荐(smart)、最新(created_desc)、视频(video)
3. 3
   添加笔记列表社区内容 → 笔记列表；联动标识同样填 home-feed
4. 4
   选模板uiTemplate 选模板 3（简洁一行，推荐）或模板 1（传统双行）
5. 5
   添加结束文本信息展示 → 结束文本；homeListFooter 开；放在笔记列表正下方

筛选标签组件手册文档

笔记列表完整手册文档

结束文本组件手册文档

筛选联动说明文档

第 8 步：预览与保存

1. 1
   预览工具栏预览查看截图效果
2. 2
   保存保存 → 勾选更新封面截图
3. 3
   启用返回列表 → 平台首页 v1 → 启用

第 9 步：配置 TabBar

TabBar 与页面 UI 分开保存：本教程第 1～8 步只改了「应用首页」画布；还须到 TabBar配置 让第一个 Tab switchTab 到首页路由。

1. 1
   打开 TabBar 配置UI管理 → TabBar配置 → 选与页面相同的区域（如平台默认）
2. 2
   首页导航项导航1 → 跳转 → TabBar 页面（switchTab）→ 选应用首页 tab 路径
3. 3
   保存并验证保存配置 → 客户端强刷，确认底栏第一个 Tab 进入刚启用的首页

TabBar 配置专章文档

快速上手（含 TabBar 提要）文档

第 10 步：客户端验收

若不变：确认客户端区域与编辑区域一致；杀进程重进。

• 打开 App 首页 — 轮播、金刚区、列表正常
• 切换筛选 Tab — 列表刷新为不同排序
• 下拉刷新 — 列表重新加载
• 点击金刚区 — 进入对应业务页
• 分享 — 标题与分享图正确

常见踩坑

筛选切换列表不动联动 Key 不一致 — 标签与列表都填相同 home-feed。

有两个列表加了圈子列表又加笔记 — 三选一，删掉多余。

保存了但 App 旧样未启用或区域不对 — 列表点启用；核对区域。

图片不显示存储未配或 URL 非公网 — 检查文件存储 Tab。

相关文档

页面类型说明笔记列表组件详解筛选标签详解