前言
经过了前两章的学习,接下来我们去模拟的实际场景开启实战篇,以下是界面
1.前期准备
前期把页面准备好后,给中继器的每个单元格命名为了方便数据绑定的操作。
为了演示我准备了几十行数据,建议也多准备一点。
2.数据展示
这一步非常简单,只要给中继器添加【每项加载时】
的事件,然后将各个中继器的值填入对应单元格就行了
但是,当我们绑定后数据显示时会自动展示所有的数据,这样看起来不太方便。
所以这里先需要做一个分页的操作。
【载入时】
【设置每页项目数量】
,添加局部变量获取下拉框的值通过函数的方式设置每页显示的项目数量
当我们去修改每页显示项目数量的元件所选项时,对应的每页显示项目数量也应该发生改变,所以也添加【选项改变时】
【设置每页数量】
,这样就ok了。
还有一个问题就是,当我们去改变每页显示项目数量的时候,我们的分页组件的位置理应发生改变。
所以还需要在【载入时】
和【选项改变时】
去移动分页组件。
因为我的分页组件高60,再根据中继器的x轴位置和中继器的高+70(留10做空格)就行了。
这里可以看到【载入时】
做了一个等待100ms的操作,因为当中继���和分页同时载入时,中继器数据如果没有加载完成会导致分页组件的摆放位置错误,所以等待一会儿👍🏻。
3.分页
接下来继续看看分页的操作
【第一页】
直接添加 【设置当前显示页面】
的事件,然后选择页面 【值】
,页码填 【1】
就好了
【上一页】
、 【下一页】
、 【最后一页】
也很简单,且用的是相同的事件,【设置当前显示页面】
再在 【页面】
选择中选择对应的选项即可👍
之后再来看这个页码显示器,这个页码显示器不仅展示了总页数和当前页码,其实还可以提供了快速跳转至特定页面的功能,让我们一起来看看吧
首先可以在中继器数据载入的时候为这个文本框设置文本,显示的就是当前所在页和总共页数,中继器【每项加载】
时去设置这个元件的文字。
这两个函数,前一个就是当前所在页,后面一个就是中继器总共的页数。
然后当我们去点击这一文本框的时候,使它的文本为空,所以添加事件【获取焦点时】
【设置文本】
为 【" "】
。
当这个文本框失去焦点时也要恢复文本为"当前页/总共页数"的形式,所以添加事件【失去焦点时】
【设置文本】
,函数就是上一步【每项加载】
设置的函数。
这个元件在最后要实现我们输入数字,按回车,跳转中继器相应页数的功能。
添加事件 【按键按下时】
为中继器【设置当前显示页面】
然后 【值】
就是文本框内我们输入的数字。
但光这样还不行,还需要添加情形:当回车键按下且元件内文字不为空时才触发刚刚我们添加的事件,到这里整个分页功能就完成了👍🏻
4.查询
查询功能比较好实现,我做了两个筛选条件来去区分不同的场景下的筛选。
a.当姓名不为空,年级选项为全部
b.当姓名为空,年级选项不为全部
c.当姓名不为空,年级选项不为全部
d.当姓名为空,年级选项为全部的时候移除筛选
a、b、c添加的筛选都是 搜索区域文本框的文本和下拉框的所选项,添加局部变量就行了
重置按钮很简单,点击之后移除中继器全部筛选再把文本框内文本设置为空和下拉框所选项设置为全部就行了。
5.增和改
准备好两个页面,一个新增一个修改
点击 【添加】
按钮,显示新增表单然后清空元件内的文字和回复下拉列表默认选项
新增表单的 【确认】
按钮添加 【单击】
【添加行】
的事件,对应的把元件内的文字添加进行就好了,最后再隐藏新增表单。
中继器内的 【编辑】
添加 【单击】
事件先显示修改表单,然后将表单内元件的文字内容设置为当前行的对应信息。
为了保险起见取消标记所有行再标记当前行。
修改表单的确认和新增表单的确认是一个道理,只是 【添加行】
变为了 【更新行】
,然后还是把元件内的文字更新到中继器对应字段,最后隐藏修改表单就行了。
总结
通过本文的深入探讨,我们对 Axure中继器
的强大功能和应用场景有了全面的认识。
中继器作为 Axure
中的核心组件之一,不仅极大地提升了原型设计的效率,也为交互设计带来了无限的可能性。
最后,感谢每一位读者的陪伴和探索。
愿我们共同在交互设计的道路上不断前行,用我们的创造力和专业知识,为用户带来更加卓越的体验。