Axure教程：實現頁面上下活動和頂部吸附
本文給大家介紹一個，如何在Axure中實現頁面上下活動和頂部吸附，一起來看看~
最終效果預覽：https：//xydq37。axshare。com/#c=2
元素準備
首先在畫布中拖一個矩形框，寬度為375px，高度為675px，模擬手機螢幕大小；
然後在矩形框內新增一個動態面板，寬度：375px，高度597px，命名為
“首頁外框”.
在
“首頁外框”
的state1裡再新增一個動態面板，寬度：375px，高度1220px，命名為
“首頁內容”。
上下滑動效果
點選“首頁外框”動態面板新增
拖動時
用例 ，拖動時：選擇
移動
“首頁內容”為
垂直拖動
，新增邊界：頂部<=0；頂部>=“首頁外框”動態面板高度-“首頁內容”動態面板高度。
在“首頁內容”動態面板的state1中新增推薦卡片、導航欄和資訊流展示面板，如下圖所示：
為你推薦卡片左右滑動效果
點選外層動態面板（“為你推薦”），新增拖動時用例：在用力編輯器中選擇
移動
內容動態面板 為水平拖動。
在移動的下拉選單中選擇水平拖動，併為其新增邊界條件：左側<=0；左側>=［LVAR1。Width-LVAR2。Width］，點選右側fx，進入編輯。首先新增區域性變數LVAR1：元件選擇為你推薦（外層動態面板），新增區域性變數LVAR2：元件選擇內容（內層動態面板），如下所示：
導航欄（用於頂部吸附）
導航欄由“全部”文字標籤、“附近”文字標籤、直線段（下稱滑竿）、矩形框組成。
滑竿的動態效果有兩種實現方式：
1）使用動態面板，單擊選單項進行動態面板切換
2）不使用動態面板，使用移動事件，即滑鼠單擊選單項時，移動滑竿（直線段）到指定位置，具體操作如下：
a） 為“全部”新增滑鼠單擊時和滑鼠選中時用例，如下所示。
滑鼠單擊時：選中當前元件，並設定選中時的字型顏色和粗體，取消選中“附近”。選中時：移動滑竿to x：［［This。x ］］ y：［［Target。y］］ （選擇絕對位置），這裡的This代表“全部”文字標籤，Target代表被移動的物件：滑竿；（滑竿x座標和“全部”x座標保持一致，滑竿y座標保持不變）。新增動畫：線性，時間100s（自行設定）。
b）為“附近”新增滑鼠單擊時和滑鼠選中時用例，與上面的“全部”設定完全一樣。
資訊流展示動態面板：命名為“content”
為“content”動態面板新增兩個狀態：state1和state2，用於內容切換。
滑鼠單擊
全部
時，設定content為state1；滑鼠單擊
附近
時，設定content為state2。
導航欄頂部吸附效果實現
將導航欄複製一份，命名為“menugroup（copy）”，將其放在首頁外框動態面板的state1中，設定“menugroup（copy）”樣式為隱藏，如下圖所示：
為“首頁內容”動態面板新增
移動時
用例，如下圖所示：
case1：如果首頁內容“動態面板”向上移動的距離大於136（其中136為導航欄外圍矩形框的y座標），即當This。y<=-136時，就顯示“menugroup（copy）”；
case2：否則，隱藏“menugroup（copy）”。
最後新增搜素框和手機頂部狀態列，以更加逼真。至此已經能實現頁面在向上滑動過程中導航欄頂部吸附的效果了。點選預覽效果：https：//revocu。axshare。com/#c=2
但細心的你會發現這裡有一個問題：當tab鍵=附近時，頁面向上滑動的過程中，頂部吸附時tab鍵=全部，這是不對的。如何解決呢？
再新增一個menugroup（copy）1，樣式同樣設為隱藏，與“menugroup（copy）”重疊放置。
這時在移動“全部內容”動態面板時，增加顯示“menugroup（copy）”還是“menugroup（copy）1”的判斷條件即可，按照下圖進行設定即可。
補充說明：“menugroup（copy）”中的全部，在引用頁面時，勾選選中，見下圖。
而“menugroup（copy）1”中的附近，在引用頁面時，勾選選中。
最終效果預覽：https：//xydq37。axshare。com/#c=2
本文由 @南方碟道 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
