整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
宫格用来平铺展示很多频道或者栏目。那么如何用Axure画出该功能呢?
常用场景有“微信APP-我-钱包”、“淘宝APP-首页-频道”、“支付宝APP-首页”。
九宫格通常包含N个格子，每行3个，每个格子由按钮和图标组成。
1. 从默认元件库拖动“中继器”到工作区合适位置。
2. 双击该中继器进入内部，即可编辑每一个格子。
3. 先画按钮。选择矩形并修改尺寸为125*125px（每行3个，则单个宽度=375/3）。双击输入文字“标题”，然后对齐方式为底部对齐。
4. 再画图标。从默认元件库拖动“图片”到合适位置，修改尺寸为75*75px。
5. 点击空白区域即可设置中继器属性，添加更多的行，直到9个。这里输入的内容直接代表原型中的每个格子名称。
6. 设置中继器的样式，布局改成水平，勾选网格分布，每行项目数为3。
7. 回到工作区，就可以看到九宫格效果。
8. 生成原型HTML并在浏览器中查看效果。
九宫格的常见交互效果：点击每个格子，跳转到新页面。
接下来以“微信APP-我-钱包”来作为案例详细讲解。
9. 修改每个格子的标题，双击Column0的每一行，依次输入对应的标题。
10. 然后画出每个宫格对应的页面，总共9个，依次创建。
11. 双击该中继器进入内部，选中按钮和图标，进行组合。
12. 选择该组合，设置它的交互事件“鼠标单击时”，但是很容易发现无法设置它跳转到哪个页面。因为这个组合代表九个格子，所以理论上应该设置跳转到9个子页面。然后需要利用中继器的属性进行设置。点击column0，然后点击“左侧添加列”，生成Column1这一列。
13. 选中Column1的第一行，然后右键点击“引用页面”，然后选择第一个格子对应的子页面。同理设置下面8个行。
14. 设置该组合的交互事件“鼠标单击时”，添加动作“链接-打开链接-当前窗口”，组织动作“选中链接到url或文件”，点击“fx”打开“编辑值”弹窗，然后点击“插入变量或函数”，然后选中“中继器/数据集-Column1”，最后确定。
15. 生成原型HTML并在浏览器中查看效果。
不同场景下的九宫格功能，标题不一样，样式相对固定。
根据多年PM经验，总结出2种常用的“九宫格”，添加到APP元件库，供后续调用。
ttp://www.jianshu.com/p/2a33d170d35a
```
稀还记得上学那会，拿着笔在本子上画个九宫格，然后和别人画叉叉圈圈，谁先练成一条线谁就赢了。而到了现在，JS程序员直接写出了这么一个简易的九宫格，效果如图：
【GIF】点我查看
我们都知道只要占据了3个点，就能够连成线的机会占据一大半，但也并不是说一定能赢，因为这个是没有绝对的赢的，只是说占据了那3个点连成线的几率要大出很多，如果让我自己来下的话始终都是平局，怎么下都逃不出这个梗。
三阶幻方（九宫格）。试将1~9这9个不同整数填入一个3×3的表格，使得每行、每列以及每条对角线上的数字之和相同。
1、通过定义lottery-unit来控制节点的个数及索引；
2、通过设置lottery.crcle来定义需要转动的基本次数，在这个次数内，定时器的时间间隔不断递减，知道某个具体的数值；
3、当外界设置了lottery.prize即中奖目标的索引后，检查当当前转动次数已经大于lottery.crcle，这个过程开始递减定时器的时间间隔，直到lottery.prize等于lottery.prize，这时候初始化所有参数
4、其次就是判断，也就是OX的判断，当然这里需要提醒的就是没次点击一下之后，比如先点击一下是个O，那么下一次点击的就是X，这个需要记住。
当然，如果有想获取此案例的小伙伴们，可以直接来前端群：621071874，欢迎小白进来一起学习，共同进步，当然我也会找一些比较经典的案例，符合现在企业的面试需求以及适合小白学习的基础视屏以及学习素材都会相应的在群里共享。（包括此案例，仅限于小白哦，大牛我想这个对你已经很简单了吧）
占据绝对位置的3点
css
HTML
*请认真填写需求信息，我们会在24小时内与您取得联系。
