布局导航组件

本篇介绍 布局导航 分类下的 5 个组件：轮播图、图片布局、金刚区、搜索栏、筛选标签。

布局导航分类下的 5 个组件：轮播图、图片布局、金刚区、搜索栏、筛选标签。负责首页顶部的视觉焦点、快捷入口与内容筛选。

UI管理 → 页面配置 → 设计 → 布局导航·运营 / UI 编辑人员

移动端宽度与左右留白

灵萌客户端基于 uni-app，移动端设计稿逻辑宽度为 750rpx，编辑器画布预览与真机一致。

只需设置宽度与左边距即可，不必再单独填右边距。适用于卡片、轮播、图片等需要距屏幕边缘一点距离的块级组件。

• 750rpx = 屏幕逻辑全宽
• 若希望组件两侧留空且整体居中：在样式 Tab 将宽度设为 720rpx，左边距设为 15rpx
• 720 + 15 + 15 = 750，即左右各 15rpx 边距

通用说明

组件宽高、外边距等请在选中组件后切换到样式 Tab 调整。

轮播图

多张图片自动或手动轮播，常用于首页顶部 Banner。圈子页、服务表单不可用。

• 首页首屏：高度 320～400 rpx，左右 margin 24 rpx + 圆角 16 rpx
• 至少添加 1 张图片；每张图务必配置点击动作
• 图片过多会增加首屏加载时间，建议 ≤5 张并压缩体积

1. 1
   添加组件左侧布局导航 → 轮播图
2. 2
   添加图片属性 → 图片列表 → + 添加图片，从媒体库选择
3. 3
   配置跳转为每张图单独设置点击动作（如活动页、外链）
4. 4
   设置高度样式 → 高度 300～360 rpx

图片列表轮播项，每项含图片与点击动作；2～5 张活动图

图片模式 / 图片圆角aspectFill（裁剪填充）；0 或 16 rpx

轮播间隔 / 动画时长3000 ms（3 秒）/ 500 ms

自动播放 / 循环 / 纵向开启 / 开启 / 一般关闭

显示指示器 / 指示器位置 / 对齐开启；内部/外部；左/中/右

指示器颜色 / 尺寸 / 间距未选中 #ffffff66；激活 #ffffff；12×12 rpx

图片布局

按预设模板将 2～4 张图片拼成一块区域，适合活动入口、分类导购。

• 编辑器会提示「x/y 张」；不足的位置显示占位 +
• 每张图可单独设点击动作
• 图片主体尽量居中，避免重要内容被裁切

1. 1
   添加组件左侧布局导航 → 图片布局
2. 2
   选择模式先选布局模式，再按提示数量添加图片
3. 3
   设置高度样式 → 高度 350～450 rpx（未设时默认约 400 rpx）

布局模式 1 — 左大右二3 张：左侧一大块，右侧上下两块

布局模式 2 — 左大右混4 张：左侧一大块，右上长条 + 右下两格

布局模式 3 — 左右对分2 张：左右各一块等大

布局模式 4 — 三列等宽3 张：横排三等分

间距 / 圆角 / 内部圆角20 rpx / 16 rpx / 自动（间距为 0 时隐藏内侧圆角）

金刚区

图标 + 文字的宫格快捷入口，类似 App 首页「分类图标」。

• 首页常用 4 列 × 2 行 = 8 个入口，图标风格统一
• 每个项目必须配置点击动作，否则点击无效
• 标签不宜过长，2～4 个汉字

1. 1
   添加组件左侧布局导航 → 金刚区
2. 2
   添加项目+ 添加项目，为每项上传图标、填写标签、设置点击动作
3. 3
   调整布局调整每行列数与图标大小

导航项目每项含图标、标签、点击动作；8～10 个常用功能

每行列数4（常见）、5（更密）、3（更疏）

行间距 / 第二行30 rpx；项目超过列数时自动换行

隐藏文字只显示图标，极简风格时可开

图标大小 / 圆角80 rpx；16（方角）或 999（圆形）

文字大小 / 颜色 / 字重24 rpx、#333333、正常/中等

搜索栏

带搜索图标、提示文字与可选「搜一搜」按钮、更多入口的搜索条。

• 搜索栏通常为展示 + 跳转，实际搜索在目标搜索页完成
• 务必配置搜索框点击，否则用户点击无反应
• 更多入口适合放扫码、消息等高频操作

1. 1
   添加组件左侧布局导航 → 搜索栏
2. 2
   配置外观配置提示文字与搜索框外观
3. 3
   配置跳转设置搜索框点击、更多按钮点击的跳转目标

左侧图标展示方式字体图标（默认）/ 图片

搜索图标名 / 颜色 / 边长search；#999999；32 rpx

提示文字 / 字号 / 颜色 / 对齐搜索笔记、圈子、用户；26、#999、左对齐

按钮文字 / 背景 / 文字颜色搜一搜；黑底 #000 + 白字

边框 / 搜索框圆角 / 背景色#F5F5F5；圆角 50；#F8F8F8

显示更多 / 搜索框点击 / 更多按钮点击跳转全站搜索页、个人中心等

筛选标签

横向可滚动的标签栏，用于切换推荐/最新/视频等筛选项，并可联动下方列表。

筛选标签每页最多 1 个。圈子列表、笔记列表、瀑布流三选一。

• 列表 API 联动：筛选标签与笔记/圈子列表的联动标识必须一致
• Tab 独立内容区：手机预览内 Tab 不可点击（避免无法选中组件）
• 圈子页只能与笔记列表联动，不能联动圈子列表
• 个性化推荐排序需后台开启推荐能力；不可用时会自动降级为智能热度

1. 1
   添加组件左侧布局导航 → 筛选标签
2. 2
   添加列表在筛选标签下方添加笔记列表或圈子列表
3. 3
   配置联动配置下方内容模式、联动标识，并添加各筛选项

滑动时吸顶上滑时标签栏固定在导航栏下方（默认开启）

下方内容模式列表 API 联动 / Tab 独立内容区

联动目标圈子列表 / 笔记列表（首页）

联动标识 filterLinkKey与下方列表组件配对编号，一致才联动；默认 default

默认选中下标0（第一项）

筛选项 — 显示文字 / 取值推荐、最新、视频；留空则用显示文字

筛选项 — 排序（笔记/圈子）智能热度、创建时间、点赞等；升序/降序

筛选项 — 圈子 / 话题 / 笔记类型留空=不限；视频 Tab 选 type=1

外观 — 选中/未选中背景与文字品牌紫 #9C5CFF + 白字 / 灰底 #F2F2F2

外观 — 指示条 / 字号 / 药丸圆角宽 48、高 6；26 rpx；圆角 999

相关文档

信息展示组件