核心作用:在页面顶部或底部提供清晰的分类入口或核心功能快捷通道(如首页、服务、关于我们),帮助用户快速理解网站架构并直达目标页面,是提升小程序/网站易用性的基础导航设施。
一句话描述:进入小程序设计页,在左侧【层级】面板中选中某个组件,右键选择在上方或下方新增“导航列表”,然后在右侧属性面板中点击【编辑】,统一更换图标、修改标题及设置跳转链接即可完成配置。
第一步:进入设计页并添加组件
1. 登录后台,在左侧菜单选择 【小程序设计】 进入对应模板的站点设计页面。

2. 在左侧 【层级】 管理面板中,选中你想要在其上方或下方插入导航列表的组件(例如“轮播图”或“页面”)。
3. 右键点击该组件,在弹出的上下文菜单中,选择 【上方添加】 或 【下方添加】。

4. 在弹出的“编辑导航项”窗口中,切换到基础--导航菜单下,你会看到一组成品导航列表。选择一种,点击【立即使用】。此时,一个新的导航列表组件就会被插入到你选中的位置。

第二步:打开导航项编辑面板
1. 在左侧 【层级】 管理中,选中刚刚添加的“导航列表”组件。
2. 观察右侧的 【属性】 面板,向下滚动找到“导航设置”区域,点击 【编辑列表项】 按钮。会出现一个弹窗窗口。

第三步:修改图标与标题(关键步骤)
1. 在弹出的“编辑导航项”窗口中,你会看到一组预设的图标和标题。

2. 修改图标:直接用鼠标移动到某个图标上,图标右上角会出现 【更换】 按钮,点击后上传或选择新的本地图片作为图标。

3. 修改文字:点击图标下方的 【标题】 输入框,删除原有文字并输入新的导航名称(如“品牌优势”)。

4. 设置链接:点击标题行右侧的 【设置链接】,在弹窗中选择该导航项需要跳转的目标页面。


第四步:保存与预览
1. 完成所有导航项的修改后,点击弹窗右下角的 【确认】。
2. 点击页面顶部的 【保存】,并在预览模式下查看导航列表的实际显示效果和点击交互是否正常。
3、点击【发布】然后访问小程序可看下最终效果。

● 警惕全局绑定陷阱(非常重要):导航列表中的每个图标和标题是全局变量绑定的。如果在编辑弹窗中直接点击图标去“更换图片”或修改文字,同一个风格组内的所有导航项都会跟着一起变!想要独立修改某一个,必须严格按照上述流程,点击具体的“图标区域”或“标题输入框”进行操作。
● 右键快速布局:除了拖拽添加,你还可以在层级管理中选中某个组件,右键选择“上方添加”或“下方添加”,快速在现有组件旁插入导航列表。
● 风格统一建议:虽然可以单独修改文字,但建议一套导航列表中的图标尺寸和风格保持统一,这样能让小程序看起来更专业、整洁。