php翻页抽奖法式技巧_Axure教程用Axure实现晚会抽奖轨范

雷迪丝and枕头们，欢迎来到星光大道……sorry，拿错题词卡了，重来

（XX公司年会暨春节联欢晚会现场）女士们，师长西席们，接下来便是万众期待、捋臂将拳、蠢蠢欲动、闻风丧胆、激动万分、哀号遍野……的幸运大抽奖环节……废话不多说，请看大屏幕（下图）……

OK，不卖关子了，想必看到这里，小伙伴们已经明白我说的这个Axure原型是个何方妖孽，竟能登上春晚（我可没说是央视）舞台了吧。
是的，便是一款年会抽奖程序，你可千万别把它当成是只会招摇撞骗、摆摆架子的低能原型。
它是真的可以在年会现场作为抽奖系统来用的，当然年会用的功能可能要比我展示的原型繁芜一些，但是只假如类似的事情事理，基本也能实现；其余如果这个抽奖原型功能上可以知足你的需求，那么只须要更换一下抽奖数据库（实在便是中继器里的数据项，换成你所须要的）就可以了。

预览地址

说到这里，先给大家奉上原型预览地址：http://www.raedme.cn/axurelab/006_choujiang/，接下来我再和感兴趣的小伙伴细细聊这原型中的子丑寅卯。

事情事理

这个抽奖程序的事情事理实在非常大略，并且大家该当都见过类似的东西，不过在此我还是再赘述一下。

首先打开抽奖页面，然后按下键盘上的任意键（也可设置为指定键）开始抽奖，此时屏幕上会快速闪现被抽奖人信息；

然后再次按下键盘上的任意键或指定键，抽出中奖者（此时被抽奖人的信息不再闪烁切换，而是固定显示为中奖人信息）。
这样就完成了一轮抽奖。

如果进行下一轮抽奖的话，只须要实行相同的操作即可。
但这个中会有一个过程，便是下一轮抽奖会打消掉之前的中奖者，为了防止同一个人重复中奖。

根据这个事理，我们可以明确在制作原型的过程中须要办理哪些问题，如下：

带着这些问题，我们开始原型的制作过程。

制作过程

用到的axure元件：中继器、文本框

PART1：创建被抽奖人数据库（中继器）

用中继器来存储被抽奖人的信息，这个操作非常大略，只须要添加一个中继器元件，然后在中继器中的数据集中添加相应的被抽奖人数据即可。
不过本案例中被抽奖人的数据并不是一开始就存放在中继器中，而是动态添加进去的，也便是在抽奖页面加载的时候，向中继器中添加数据，并且为中继器中的数据进行排序，排序字段是一个随机数。
这样就担保了及时向中继器中插入数据时候是有顺序的，但是中继器一排序，就会将之前原有的顺序打乱，由于对付抽奖程序，这个是必须的。

PART2：实现被抽奖人信息的快速闪烁切换（中继器、文本框）

闪烁切换的效果通过中继器的分页来实现，对中继器进行分页，每页显示一项数据，也便是一条被抽奖人信息。
其余由于中继器的翻页动作须要有触发事宜，而连续的翻页则须要连续的触发事宜，这里我采取一种可以循环实行的事宜来实现，便是通过文本框的文本改变时势宜，文本框内容改变时实行一个动作，这个动作设置文本框的内容使其发生改变，这样就形成了一个循环。

① 设置中继器分页

② 在文本框上设置文本改变时对中继器翻页的事宜及动作

这里须要把稳一点：当翻到末了一页的时候，须要再使其翻到第2页（本案例中第1也为空缺页，不参与抽奖），以是这个过程须要一个单独的判断，便是 Case2 的内容，当然这个是基于 Case1 的判断条件之外的条件，也便是当中继器中数据项的页码=总页数的时候。

其余等待韶光50ms用来掌握闪烁切换的快慢，这个肯根据须要自行调度。

③ 如何连续触发“文本改变时”这个事宜

由于文本框显示的是中继器中的数据项，而中继器中的每一条数据都是不同的，以是当中继器翻页的时候，就会触发文本框上的“文本改变时”事宜，也便是上述第②步的过程；但是还须要一个动作来触发第一次，第一次之后就可以进入循环，这个动作实在便是按下键盘上的任意键，我放在后面讲。

PART3：从被抽奖人信息中删除中奖人信息（中继器）

实在这个过程便是通过删除中继器中的数据项来实现的，即删除当前抽出的中奖人数据；这个在进行删除操作的时候须要做一个判断，即被删除的数据项的值即是当前显示的中奖人的数据，这里须要用到局部变量来获取当前显示在文本框上的中奖人信息。

其余这个“删除”的动作也是在按下任意键的时候实行，在后面要先容按下任意键的逻辑的时候也会看到相应的设置。

PART4：按下键盘任意键开始/停滞抽奖的逻辑判断

按下任意键的场景基本可以分为三种情形：

以上便是抽奖案例的紧张逻辑及实现过程。

总结

本案例的核心实在是“中继器”结合“文本框”的用法。
在该案例中文本框除了用于显示中继器中的数据项，还有一个主要的功能便是利用“文本改变时”这一事宜来实现循环，而且很多地方都可以用到这种办法。
那么我的履历便是要理解不同部件所特有的一些事宜，然后加以利用，实现想要的效果。

本文由 @W.YiFAN 原创发布于大家都是产品经理 ，未经容许，禁止转载。