信息展示组件

左侧组件库 「信息展示」 分类下的 3 个组件，用于静态信息条、公告提示和列表底部状态。

信息展示分类下的 3 个常用组件：列表（xiaoyi-list）、通知栏（xiaoyi-notice）、结束文本（xiaoyi-no-more）。用于静态信息条、公告提示和列表底部状态。

UI管理 → 页面配置 → 设计 → 信息展示·运营 / UI 编辑人员

移动端宽度与左右留白

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

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

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

保存 → 启用 → 客户端验证

画布内改完不等于对用户生效，须按顺序完成以下三步。

多区域部署时，列表顶栏「区域筛选」决定配置归属；客户端区域不一致时会出现「保存了但 App 没变化」。

1. 1
   保存顶栏点击「保存」，可选勾选更新列表封面图
2. 2
   启用返回 UI管理 → 页面配置列表，对目标配置点击「启用」
3. 3
   客户端验证App 切换到与编辑时相同的区域，查看真实效果（工具栏预览仅为截图）

通用说明

属性在右侧属性 Tab 配置；外边距、背景、圆角等在样式 Tab 配置。单位 rpx 为响应式像素，750rpx 约等于屏幕全宽。

样式与点击动作文档

列表（xiaoyi-list）

通用设置式列表：每一行可带左侧图标或图片、标题、副标题、右侧文字，并配置点击跳转。内容由您手动填写，不会自动拉取笔记或圈子数据。

• 每一行需单独配置点击动作，否则点击无反应
• 左侧图片与字体图标在同一行里二选一
• 列表内容不会随用户或业务数据自动更新，改文案后须保存并启用

1. 1
   添加组件左侧信息展示 → 列表（xiaoyi-list）
2. 2
   添加行项属性 → + 添加行：填写标题/副标题，配置左侧图标与点击动作
3. 3
   调整样式样式 Tab 设外边距；属性 Tab 调行内边距、分割线、箭头
4. 4
   保存并验收保存 → 启用 → App 逐行点击验证跳转

什么时候用设置页式入口列表、功能菜单、静态 FAQ 链接等需手动维护文案的场景（非 Feed 数据列表）

标题主文案，必填

副标题可选，显示在标题下方

右侧文字可选，如已开通、99+

左侧图标字体图标 / 图片 / 无（三选一）

图标名 / 图片 URL / 图标颜色左侧为图标或图片时填写

点击动作点击该行时跳转的页面或动作

图标大小 / 圆角左侧图标或图片的尺寸与圆角（rpx）

标题 / 副标题 / 右侧文字样式字号、颜色、字重

分割线 / 箭头行与行之间的分割线；右侧 › 箭头

行内边距如 28rpx 30rpx，控制单行上下左右留白

和笔记列表有什么区别xiaoyi-list 是手动配置的静态行；笔记/圈子列表由接口分页拉取，勿混用。

改了文案 App 没变未保存或未启用 — 顶栏保存后在列表启用。

某一行点了没反应该行未配点击动作 — 展开对应行项配置。

通知栏（xiaoyi-notice）

页面顶部的公告/通知横条，左侧可显示图标或图片，中间为通知文字，可选右侧操作按钮或关闭按钮。

• 左侧展示方式只生效一种：有图片就不显示图标字体
• 横条整体背景、内边距、圆角、外边距在样式 Tab 设置
• 重要通知请同时在消息中心或弹窗中同步触达

1. 1
   添加组件左侧信息展示 → 通知栏（xiaoyi-notice）
2. 2
   填写通知属性 Tab 填写通知文字；按需配置左侧图标/图片与右侧操作按钮
3. 3
   调整外观样式 Tab 设横条背景、内边距、圆角、外边距
4. 4
   保存并验收保存 → 启用 → App 查看公告展示与关闭/按钮交互

什么时候用活动预告、版本更新提示、合规声明等短期公告；建议配合消息中心做重要通知

通知文字横条上显示的主文案

图片 URL / 图标字体名左侧展示；优先级：图片 ＞ 字体图标 ＞ 文字/emoji

图片边长 / 圆角 / 图标字号 / 颜色左侧图标样式（rpx）

文字颜色 / 字号 / 字重 / 对齐通知正文样式

可关闭用户是否可点 × 关闭（关闭后当次会话内隐藏）

操作按钮 / 按钮文字 / 背景 / 文字色右侧操作按钮

左侧图标不显示图片 URL 优先 — 若填了无效图片 URL，图标字体也不会显示；清空图片或换有效图。

背景色叠了两层属性里提示条背景与样式 Tab 外层背景分开 — 建议外层保持透明或统一配色。

用户关闭后又出现关闭仅当次会话有效；重新打开 App 会再次展示，活动结束请下架组件。

结束文本（xiaoyi-no-more）

列表底部状态条：展示加载中、没有更多了、加载失败等文案。可作为首页列表页脚（homeListFooter）由系统自动切换状态。

• 作为首页列表页脚时，须放在笔记列表、圈子列表或瀑布流正下方，同一首页建议只放一个
• homeListFooter 为 true 时，线上由接口分页自动控制状态
• 若列表上方使用了筛选标签联动，切换 Tab 重新加载时页脚会同步进入加载中态

1. 1
   添加组件左侧信息展示 → 结束文本（xiaoyi-no-more）
2. 2
   放在列表正下方紧挨笔记列表 / 圈子列表 / 瀑布流下方；同一页建议只放一个
3. 3
   开启页脚模式属性 → homeListFooter 开启；线上由分页接口自动控制加载/完成/错误态
4. 4
   保存并验收保存 → 启用 → App 上拉加载至底部，验证页脚文案切换

什么时候用配合 Feed 列表作页脚；单独使用时手动切换「当前状态」预览样式

homeListFooter为列表页脚时由系统自动控制状态；属性里当前状态仅用于预览样式

当前状态加载中 / 没有更多 / 错误（非页脚模式时手动切换预览）

完成文字 / 加载文字 / 错误文字如 - THE END -、加载中...、加载失败

字号 / 文字颜色 / 字重 / 加载图标色状态文字样式

显示重试 / 重试文字 / 颜色错误态是否显示可点重试

筛选标签与列表联动文档

页脚一直显示加载中列表接口异常或 homeListFooter 未开 — 确认紧挨列表组件且已开启页脚模式。

筛选切换后页脚状态不对正常 — Tab 切换会触发列表重载，页脚先进入加载中再变完成/错误。

页脚离列表太远检查中间是否夹了其他组件；结束文本应紧贴列表下方。

相关文档

社区内容组件