Axure 10 中继器实战3步构建可交互商品列表支持增删改查商品列表管理是电商后台系统中最基础也最核心的模块之一。传统静态原型只能展示固定数据而使用Axure中继器可以模拟真实数据库操作让原型具备动态交互能力。本文将带您从零开始通过三个关键步骤构建完整的商品管理系统原型。1. 基础搭建创建商品列表框架在开始之前请确保您已安装Axure 10并熟悉基本操作。我们将首先构建商品列表的基础框架。1.1 初始化中继器组件从元件库拖拽中继器到画布双击进入中继器编辑模式删除默认矩形添加以下元件并命名商品图片框命名为img_product商品名称文本框命名为txt_name价格文本框命名为txt_price库存文本框命名为txt_stock操作按钮组编辑btn_edit/删除btn_delete// 中继器模板结构示例 - 中继器项 [RepeaterItem] ├─ 图片 [img_product] ├─ 文本标签 [txt_name] ├─ 文本标签 [txt_price] ├─ 文本标签 [txt_stock] ├─ 按钮 [btn_edit] └─ 按钮 [btn_delete]1.2 配置数据集点击中继器样式面板添加以下列product_id商品IDproduct_name商品名称product_price商品价格product_stock库存数量product_img图片路径填入示例数据product_idproduct_nameproduct_priceproduct_stockproduct_img1001无线耳机29950/images/1.jpg1002智能手表59930/images/2.jpg1.3 数据绑定设置为中继器添加每项加载时事件设置文本txt_name [[Item.product_name]]txt_price ¥[[Item.product_price]]txt_stock 库存[[Item.product_stock]]件设置图片img_product [[Item.product_img]]提示图片需要先在数据集中右键对应单元格选择导入图片2. 核心功能实现增删改查交互2.1 新增商品功能在画布添加表单元素商品名称输入框input_name价格输入框input_price库存输入框input_stock图片上传按钮提交按钮btn_submit配置btn_submit点击事件OnClick → 中继器动作 → 添加行 - 目标当前中继器 - 行数据 - product_id: [[LVAR1.dataCount1]] - product_name: [[input_name.text]] - product_price: [[input_price.text]] - product_stock: [[input_stock.text]] - product_img: (上传的图片路径)2.2 删除商品功能为btn_delete添加点击事件OnClick → 中继器动作 → 删除行 - 目标当前中继器 - 行当前行实现批量删除在中继器模板添加复选框checkbox_item添加全选复选框checkbox_all和批量删除按钮配置交互// 全选逻辑 checkbox_all 状态改变时 If 选中 → 标记所有行 Else → 取消标记所有行 // 批量删除 btn_batch_delete OnClick → 删除标记行2.3 编辑商品功能为btn_edit添加点击事件OnClick → 显示编辑弹窗 → 设置弹窗表单值 当前行数据配置保存按钮btn_save OnClick → 更新行 - 目标当前中继器 - 行当前行 - 更新数据 - product_name: [[edit_name.text]] - product_price: [[edit_price.text]] - product_stock: [[edit_stock.text]]2.4 商品筛选与搜索添加搜索输入框input_search和搜索按钮配置搜索交互btn_search OnClick → 添加筛选 - 目标当前中继器 - 条件[[Item.product_name.indexOf(LVAR1)-1]] - LVAR1 input_search.text添加分类筛选下拉框dropdown_category 选项改变时 → 添加筛选 - 条件[[Item.category LVAR1]]3. 高级功能扩展3.1 分页显示添加分页控制元件每页显示数量下拉框上一页/下一页按钮页码显示文本配置分页交互// 设置每页条数 dropdown_pagesize 选项改变时 → 设置每页项目数量 选中值 // 翻页控制 btn_prev OnClick → 设置当前显示页面 上一页 btn_next OnClick → 设置当前显示页面 下一页显示分页信息中继器 每页加载时 → 设置文本 - page_info 第[[This.pageIndex]]页/共[[This.pageCount]]页 - total_info 总计[[This.dataCount]]条3.2 数据排序添加表头排序按钮商品名称btn_sort_name价格btn_sort_price库存btn_sort_stock配置排序交互btn_sort_price OnClick → 添加排序 - 目标当前中继器 - 属性product_price - 类型切换升序↔降序3.3 数据导出与打印添加导出按钮btn_export配置导出交互btn_export OnClick → 触发浏览器打印 → 设置打印样式隐藏操作列实战技巧与性能优化加载性能优化大数据集时启用分页建议每页≤50条复杂计算使用函数变量缓存结果交互体验增强// 行悬停效果 中继器项 MouseEnter → 设置选中样式 MouseLeave → 取消选中样式 // 操作确认对话框 btn_delete OnClick → 显示确认弹窗 确认后 → 执行删除移动端适配使用水平滚动容器包裹宽表格触控操作替换hover效果增大点击热区实际项目中我曾遇到200商品列表的性能问题通过以下方案解决实现虚拟滚动只渲染可视区域项目将图片转换为Base64内联减少请求复杂计算移至页面加载时执行