整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
宮格用來平鋪展示很多頻道或者欄目。那么如何用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小時內與您取得聯系。
