微信小程序：实现左侧菜单、右侧内容、表单、新增按钮等组件封装

一、实现效果

左侧菜单，联动右侧列表数据，可实现页面的数据编辑和新增功能

二、主页面实现

1、主页面引入组件

引入组件二级菜单和列表组件

2、视图层

(1)引入菜单组件

直接写入组件two-menu，并写入参数菜单的数据项menu-list，选中的菜单项current-index，选择的方法onMenuSelect

(2)引入列表项

引入列表list，并写入参数如下：

属性名	类型	含义
items	Array	要展示的数据列表，例如：[ { id: 1, name: '螺丝' }, ... ]
display-config	Array	字段配置数组，决定哪些字段显示、怎么显示、是否只读等
show-avatar	Boolean	是否显示头像列（通常是图片或图标）
show-edit-button	Boolean	是否显示“编辑”按钮
show-add-button	Boolean	是否显示“新增”按钮（有些组件可能不支持这个）
page-size	Number	每页显示多少条数据（分页用）
total-items	Number	总共有多少条数据（用于计算总页数）
edit-url	String	编辑接口地址，传给子组件内部使用（如点击编辑时调用）
delete-url	String	删除接口地址，传给子组件内部使用
add-url	String	新增接口地址，传给子组件内部使用

3、逻辑层

写入基本数据，并写入回调的方法，这里的列表字段displayConfig是定义在data中的，其实也可以直接方法后端的

功能	说明
data	定义页面数据结构，包括分页、字段配置、接口地址等
onLoad()	页面加载时调用fetchData()获取数据
fetchData()	请求接口数据，并做分类、分页处理
onMenuSelect()	菜单切换时，更新当前分类下的数据
handleListItemEdit()	处理编辑事件
handleListItemDelete()	处理删除事件

 4、样式层

主要是写入主要的布局部分，主要是将左侧展示位菜单，右侧展示位列表

三、菜单组件

1、视图层（WXML）

• scroll-view：滚动容器，设置 scroll-y 表示竖向滚动。
• wx:for：循环渲染菜单项列表 menuList。
• wx:key="index"：使用索引作为唯一标识符。
• class="menu-item ..."：每个菜单项的类名，通过 {{currentIndex === index ? 'active' : ''}} 判断是否为当前选中项。
• data-index="{{index}}"：绑定当前项的索引值，用于点击时获取。
• bindtap="handleTap"：绑定点击事件处理函数。

---

2、样式层（WXSS）

• .menu：定义菜单整体样式，宽度固定，背景色浅灰。
• .menu-item：菜单项基础样式，包括高度、字体大小、居中等。
• .menu-item.active：当前激活项的高亮样式，包括背景、颜色、加粗和左侧边框。

---

3、逻辑层（JS）

• properties：
  • menuList：传入的菜单数组，如 [{"categorytop": "五金"}, {"categorytop": "电子"}]
  • currentIndex：当前选中项索引，默认为 0
• handleTap：
  • 点击菜单项后获取其索引；
  • 使用 triggerEvent 触发自定义事件 select，并传递当前索引给父组件。

---

4、JSON配置

• "component": true：声明这是一个自定义组件；
• "usingComponents"：引入其他子组件，这里引入了 list-item 组件，用于后续展示内容区域。

---

5、总结

层级	内容
视图层（WXML）	渲染菜单项，绑定点击事件
样式层（WXSS）	定义菜单样式和高亮效果
逻辑层（JS）	处理点击事件并向外抛出选中索引
组件通信	通过triggerEvent实现父子组件交互

四、列表组件

1、视图层解析（WXML）​​

(1)​​列表展示​​

使用 wx:for 渲染 items 数据

动态显示字段（displayConfig 控制）

支持头像显示（showAvatar 控制）

​​(2)分页导航​​

上一页/下一页按钮（handlePrevPage/handleNextPage）

显示当前页和总页数

(3)​​表单弹窗​​

通过 form-popup 组件实现编辑/新增表单

动态设置标题（formTitle 区分新增/编辑）

(4)​​新增按钮​​

• 条件渲染（showAddButton 控制）
• 点击触发 onAddTap 打开空表单

---

​​2、逻辑层解析（JS）​​

​​(1)数据与状态​​

items: 列表数据

editingItem: 当前编辑项（null 为新增，{} 为编辑）

formTitle: 动态表单标题

​​(2)核心方法​​

​​handleEditTap​​: 打开编辑表单（传入当前项）

​​onAddTap​​: 打开新增表单（传入空对象）

​​handleFormSubmit​​: 提交表单（触发 edit 事件）

​​handleFormDelete​​: 删除数据（触发 delete 事件）

​​分页逻辑​​: 更新页码并触发 pagechange 事件

​​事件传递​​

表单操作通过 triggerEvent 通知父组件（如 refresh、edit、delete）

---

3、​​JSON 配置解析​​

{"component": true,"usingComponents": {"form-popup": "/components/form-popup/index","add-info": "/components/add-btn/index"}
}

• ​​组件化配置​​: 声明依赖的子组件（form-popup 和 add-info）
• ​​独立作用域​​: 通过 component: true 标记为自定义组件

---

​​4、关键交互流程​​

(1)​​编辑流程​​

点击编辑按钮 → handleEditTap → 填充表单 → 提交 → handleFormSubmit → 父组件处理

​​(2)新增流程​​

点击新增按钮 → onAddTap → 打开空表单 → 提交 → handleFormSubmit → 父组件处理

(3)​​删除流程​​

点击删除 → handleFormDelete → 父组件处理

​​(4)分页流程​​

• 翻页 → 触发 pagechange → 父组件重新加载数据

五、表单组件

1、视图层解析 (WXML)

• 弹窗模式结构

  • ​​modal-mask​