今天我们要做的原型是游戏列表的翻页功能，如上图所示。
具体设计如下：
（1）当点击第一页和最后一页的时候，分别隐藏“上一页”和“下一页”按钮；否则，显示“上一页”和“下一页”按钮；
（2）当点击第5页到第8页时，按钮变化如下：
第5页：1 ... 4 5 6 ... 12
第6页：1 ... 5 6 7 ... 12
第7页：1 ... 6 7 8 ... 12
第8页：1 ... 7 8 9 ... 12
选中第四个按钮；
（3）当点击第9页~12页时，按钮变化如下：1 ... 8 9 10 11 12；
（4）设置按钮选中状态为粗体/红色；
（5）当点击任何一个页数的按钮时，都会选中对应页数的按钮，界面也都会切到相应页面；
设计逻辑：
（1）我们设置每一个按钮的点击事件：切换到对应this.text值的pageIndex。并且设置选中状态为粗体红体；
（2）用一个隐藏的矩形元件，用来做触发事件。该元件的事件有”鼠标单机“（设置隐藏上一页或者下一页），”鼠标双击“（用来设置按钮的text变化）和“鼠标右击”（用来设置不同页面选择的时候，哪个按钮能被选中）。
（3）最后对每个按钮的点击事件增加对隐形矩形元件的触发事件：单击/双击和右击。
具体实例：
对隐形矩形的事件交互如下
（1）鼠标单击时：
（2）鼠标双击时：
（3）鼠标右击时：
对每个按钮元件的事件交互如下：
对“上一页”和“下一页”按钮的交互设计：
如果想每天学一点新的知识，敬请关注微信公众号
微信扫一扫
关注该公众号