今天我们要做的原型是游戏列表的翻页功能，如上图所示。

具体设计如下：

（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）鼠标右击时：

对每个按钮元件的事件交互如下：

对“上一页”和“下一页”按钮的交互设计：

奈斯