欢迎光临
我们一直在努力

Axure9.0中继器零基础实操:5分钟做一个用户列表

前言

把中继器理解成一个Excel表格:

  • 数据集 = Excel单元格,存放所有原始数据(姓名、手机号、状态、时间等)
  • 内部模板 = 表格一行的样式,你只需要画好一行列表样式
  • 自动渲染 = 中继器自动根据Excel里的数据,批量复制生成N行列表,数据变了,页面自动跟着变

什么时候必须用中继器?

只要页面存在重复元素+数据动态变化,一律优先使用中继器:

  • 后台管理系统:用户表格、订单列表、权限列表(筛选、删除、编辑、分页)
  • 移动端页面:消息列表、商品列表、收货地址列表

常见交互:关键词搜索、下拉筛选、批量删除、新增表单数据

操作步骤

跟着步骤一步一步操作,新手零失败,完整复刻后台常用用户数据表格。

步骤1:拖拽元件,新建中继器

  • 左侧元件库 – 基本元件下方,找到【中继器】,拖拽至画布
  • 选中中继器,右侧属性栏打开【数据】面板
  • 修改默认列,新增4列:name、account、phone、state
  • 步骤2:批量录入测试数据

    直接在数据集表格内输入3组用户数据,也可以复制Excel内容,右键粘贴一键批量导入,省时省力。

    (直接添加)

    (拷贝数据)

    步骤3:编辑中继器内部列表模板

  • 双击中继器,进入内部编辑页面
  • 复制3个【矩形】,并命名
  •    3.摆放4个【矩形】,分别对应姓名、账号、手机号、状态

    步骤4:绑定每项加载事件

  • 选中中继器内部空白处,添加事件:【每项加载时】
  • 添加动作:设置文本
  • 依次将矩形元件绑定对应字段,确认后返回画布
  • 关键操作:数据绑定
  • plain text
    姓名文本框:[[Item.name]]
    账号文本框:[[Item.account]]
    手机号文本框:[[Item.phone]]
    状态文本框:[[Item.state]]

    步骤5:预览查看效果

    直接F8预览,此时页面自动生成3行完整用户列表,无需手动复制任何元件,修改数据集内容,页面数据实时同步更新。

    赞(0)
    未经允许不得转载:171主机测评 » Axure9.0中继器零基础实操:5分钟做一个用户列表
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址