网站导航
> 技术文档 > 微信小程序：实现左侧菜单、右侧内容、表单、新增按钮等组件封装_微信小程序抽屉菜单

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

网友: 技术文档 2025-08-08 06:57:35

一、实现效果

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

二、主页面实现

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→ 填充表单 → 提交 →hand

网络标签：

相关问题