云计算百科
云计算领域专业知识百科平台

Axure9.0 中继器后台分页功能教程

一、功能说明

打开中继器属性面板开启内置分页功能,设置单页固定展示10条数据,搭配页面【上一页】【下一页】按钮,添加分页跳转动作,快速制作后台通用列表分页原型,无需公式、无需变量,原生一键配置。

二、前期基础准备

  • 左侧组件库,拖拽【中继器】至页面画布,自定义命名:数据列表中继器
  • 编辑中继器数据集,录入大于10条测试数据,方便分页切换查看效果
  • 页面外层画布,拖拽两个按钮,分别修改文字为:上一页、下一页,放置列表底部
  • 双击中继器,进入内部单行模板,完成数据绑定、行样式排版
  • 三、第一步:开启中继器分页(核心设置)

  • 选中画布中继器,右侧打开【属性】面板
  • 找到分页栏目,勾选:多页显示
  • 设置每页项目数:填写数字10,即单页固定展示10条列表数据
  • 四、第二步:分页按钮交互配置

    1、下一页按钮交互

    (1)选中【下一页】按钮,新建交互:鼠标单击时

    (2)添加动作:中继器 — 设置当前显示页面

    (3)目标:选中数据列表中继器

    (4)页面设置:选择【下一页】,确定保存

    2、上一页按钮交互

    (1)选中【上一页】按钮,新建交互:鼠标单击时

    (2)添加动作:中继器 — 设置当前显示页面

    (3)目标:选中数据列表中继器

    (4)页面设置:选择【上一页】,确定保存

    3、首页按钮交互

    (1)选中【首页】按钮,新建交互:鼠标单击时

    (2)添加动作:中继器 — 设置当前显示页面

    (3)目标:选中数据列表中继器

    (4)页面:选择【值】

    (5)页码:1

    (6)确定保存

    4、尾页按钮交互

    (1)选中【尾页】按钮,新建交互:鼠标单击时

    (2)添加动作:中继器 — 设置当前显示页面

    (3)目标:选中数据列表中继器

    (4)页面:选择【末尾】,确定保存

    五、功能效果

    点预览按钮,预览原型,列表每页固定显示10条数据,点击下一页切换后续数据,点击上一页返回往期数据,首尾页面点击按钮无报错、无空白跳转,适配后台表格分页交互。

    六、重点注意事项

  • 分页按钮放置页面外层,禁止放入中继器内部模板;
  • 必须先在中继器属性开启分页,设置每页条数,分页按钮才会生效;
  • 测试数据条数必须大于每页条数,才能看出分页切换效果;
  • 如需修改展示条数,直接在中继器属性修改每页项目数字即可;
  • 自带边界保护:第一页点击上一页、最后一页点击下一页,不会出现数据错乱。

    赞(0)
    未经允许不得转载:网硕互联帮助中心 » Axure9.0 中继器后台分页功能教程
    分享到: 更多 (0)

    评论 抢沙发

    评论前必须登录!