從預覽效果來看，這裏涉及到滑屏和單擊左右切換和頂部菜單的兩種情況的吸附這兩大交互。
第一步：截屏，切圖。
我的手機可以長屏截屏，得到第一頁截屏。
切圖：我們需要切到如下素材：手機狀態欄和搜索框、廣告、正在熱映黑字、即將上映灰字、黑色滑塊、滑塊下的灰色線條、電影主頁內容，下方主菜單。
操作：拉輔助線（注意放大貼合到像素級別）- 切圖工具沿着輔助線拉矩形 - 點擊文件-導出-儲存爲web格式 - 找到導出的文件夾images - 命名。
第二屏中間有滾動日期，沒有截到長屏，於是截了8張屏，然後慢慢切圖：
切圖需要取得素材：正在熱映灰字、即將上映黑字、時間欄、主頁內容。
如圖：
整合一下素材：
第二步：將素材放入Axure
由於我的手機分辨率是1080*1920，於是我設置的原型尺寸爲360*640，縮小三倍。
鎖定寬高比，設置寬爲360，正在熱映圖則設置爲180。
接着就是按住ctrl+shift，複製拖動正在熱映插入即將上映灰字，和黑色滑塊，設置高爲2像素，切到的黑色滑塊圖尺寸爲540*5，除以三，取2像素（因爲不能設置小數）。
爲了不讓黑色滑塊另一邊不露空隙，我要將它上移1像素，留1像素至於灰色線條之上（灰色線條像素爲1）經計算正在熱映黑字Y座標爲189，高爲38，相加爲227，那麼黑色滑塊Y座標爲226，灰色線條Y座標爲227。
繼續插入主頁和底部菜單，因爲尺寸爲360*640，底部菜單的高爲49，所以設置它的Y座標爲591。
插入時間欄，因爲它是在即將上映那一主頁最上部的，所以Y座標爲228，和這邊主頁一樣。
將各個元素命名，將需要頂部吸附的元素組合，命名爲菜單組。
將會滾動的元素：廣告，吸附菜單組，主頁選中，轉換爲動態面板，命名爲滾動。
因爲搜索框高爲64，640減去64爲576，設置動態面板樣式，尺寸爲360*576，屬性自動顯示垂直滾動條。
先F5預覽一下,只有滾動效果，沒有左右滑屏，和菜單吸附。
線框那個時間欄的高度爲74，將主頁轉換爲動態面板，取消自動調整爲內容尺寸，添加狀態，狀態2插入內容圖片，第一張圖設置Y座標爲74，爲了給時間欄留出空間。
設置兩個菜單爲動態面板，添加狀態，插入圖片，目前所有素材都上去了，那麼都命名好。
第三步，開始交互。
第一大交互左右滑動或點擊切換主頁
首先設置向左拖動結束時的交互，如下圖，以此類推設置向右拖動結束時的交互
設置兩個灰色字體的點擊事件的切換，先看即將上映灰字，交互和上面是一樣的：
以此類推，設置正在熱映灰字的交互，先預覽一下：
OK，第一大交互搞定了，但是上面沒有頂部吸附效果，休息一下。
第二大交互：兩種狀態下的菜單頂部吸附
變量scrollX和scrollY
首先講一下變量scrollX和scrollY,就是 動態面板滾動的距離，也可以說，scrollX是動態面板滾動時元件的X座標，scrollY是動態面板滾動時元件的Y座標。首先要知道Axure的Y座標相對於我們的視覺習慣是剛好相反的，因爲它的Y座標是越往下越大，如圖：一開始座標爲（0，0）當你往上滾動100時，此時它的座標爲（0，100）；
讓我們驗證一下，插入一個矩形，設置當動態面板滾動時，顯示scrollY的數值大小：
如果理解了，那我們開始做頂部吸附交互吧
需要思考的問題
首先要知道，何時開始吸附，何時停止吸附，然後要知道怎麼個吸附法
答案來了：
開始吸附就是當滾動剛好到達菜單欄那一刻，結束吸附就是滾動沒有達到菜單欄；此時就要知道菜單欄的Y座標,爲125，那等於或超過125時，開始吸附，小於時則停止。
讓菜單欄吸附就是讓菜單永遠處於最高的部位，而最高的部位剛好就是（0，scrollY）,記住在最頂部有一個隱形的Y座標一直隨着滾動而變化。停止吸附就是菜單欄回到它原來的地方。
快要大功告成了，但是還有兩個問題：
1.即將上映主頁時間欄沒有吸附，之前將它隱藏了，如果不隱藏，那麼正在熱映主頁也會看到。
2.仔細看上圖，在吸附的同時切換主頁，會發現吸附欄是透明的，因爲菜單黑白兩種顏色字體切換時是有逐漸這個動畫的。
那要如何解決呢？
第一個問題：index載入時，隱藏它，當主頁向左滑動結束時，將時間欄顯示，向右滑動結束時，將時間欄隱藏。
第二個問題：加一個白色矩形置於吸附菜單欄和主頁之間。
我錯了，其實是把矩形放在菜單欄組合的最下面，OK,預覽一下。
