本文將給大家介紹：如何在Axure中實(shí)現(xiàn)頁(yè)面上下活動(dòng)和頂部吸附，一起來(lái)看看吧~

效果預(yù)覽：看是不是你想要的：https://xydq37.axshare.com/#c=2

一、元素準(zhǔn)備

• 首先在畫布中拖一個(gè)矩形框，寬度為375px，高度為675px，模擬手機(jī)屏幕大?。?/li>
• 然后在矩形框內(nèi)添加一個(gè)動(dòng)態(tài)面板，寬度：375px，高度597px，命名為“首頁(yè)外框”.
• 在“首頁(yè)外框”的state1里再添加一個(gè)動(dòng)態(tài)面板，寬度：375px，高度1220px，命名為“首頁(yè)內(nèi)容”。

1.上下滑動(dòng)效果

點(diǎn)擊“首頁(yè)外框”動(dòng)態(tài)面板添加?拖動(dòng)時(shí)用例 ，拖動(dòng)時(shí)：選擇移動(dòng)“首頁(yè)內(nèi)容”為垂直拖動(dòng)，添加邊界：頂部<=0；頂部>=“首頁(yè)外框”動(dòng)態(tài)面板高度-“首頁(yè)內(nèi)容”動(dòng)態(tài)面板高度。

在“首頁(yè)內(nèi)容”動(dòng)態(tài)面板的state1中添加推薦卡片（“為你推薦”–動(dòng)態(tài)面板）、導(dǎo)航欄（由全部、附近、矩形框、滑竿組成）和信息流內(nèi)容展示（“content”–動(dòng)態(tài)面板），如下圖所示：

2.為你推薦卡片左右滑動(dòng)效果

• 點(diǎn)擊外層動(dòng)態(tài)面板（“為你推薦”），添加拖動(dòng)時(shí)用例：在用例編輯器中選擇移動(dòng) 內(nèi)容動(dòng)態(tài)面板（為你推薦的內(nèi)層動(dòng)態(tài)面板命名為：“內(nèi)容”）?為水平拖動(dòng)。
• 在移動(dòng)的下拉菜單中選擇水平拖動(dòng)，并為其添加邊界條件：左側(cè)<=0;左側(cè)>=[LVAR1.Width-LVAR2.Width]，點(diǎn)擊右側(cè)fx，進(jìn)入編輯。首先添加局部變量LVAR1：元件選擇為你推薦（外層動(dòng)態(tài)面板），添加局部變量LVAR2：元件選擇內(nèi)容（內(nèi)層動(dòng)態(tài)面板），如下所示：

3.導(dǎo)航欄（用于頂部吸附）

導(dǎo)航欄由“全部”文本標(biāo)簽、“附近”文本標(biāo)簽、直線段（下稱滑竿）、矩形框組成。

滑竿的動(dòng)態(tài)效果有兩種實(shí)現(xiàn)方式：

1）使用動(dòng)態(tài)面板，單擊菜單項(xiàng)進(jìn)行動(dòng)態(tài)面板切換，這里使用第二種方式。

2）不使用動(dòng)態(tài)面板，使用移動(dòng)事件，即鼠標(biāo)單擊菜單項(xiàng)時(shí)，移動(dòng)滑竿（直線段）到指定位置，具體操作如下：

a) 為“全部”添加鼠標(biāo)單擊時(shí)和鼠標(biāo)選中時(shí)用例，如下所示。

鼠標(biāo)單擊時(shí)：選中當(dāng)前元件，并設(shè)置選中時(shí)的字體顏色和粗體，取消選中“附近”。選中時(shí)：移動(dòng)滑竿to x：[[This.x?]]? ? y:[[Target.y]] （選擇絕對(duì)位置），這里的This代表“全部”文本標(biāo)簽，Target代表被移動(dòng)的對(duì)象：滑竿；（滑竿x坐標(biāo)和“全部”x坐標(biāo)保持一致，滑竿y坐標(biāo)保持不變）。添加動(dòng)畫：線性，時(shí)間100s（自行設(shè)定）。

b)為“附近”添加鼠標(biāo)單擊時(shí)和鼠標(biāo)選中時(shí)用例，與上面的“全部”設(shè)置完全一樣。

4.信息流展示動(dòng)態(tài)面板：命名為“content”

• 為“content”動(dòng)態(tài)面板添加兩個(gè)狀態(tài)：state1和state2，用于內(nèi)容切換。
• 鼠標(biāo)單擊全部時(shí)，設(shè)置content為state1；鼠標(biāo)單擊附近時(shí)，設(shè)置content為state2。

5.導(dǎo)航欄頂部吸附效果實(shí)現(xiàn)

將導(dǎo)航欄復(fù)制一份，命名為“menugroup(copy)”，將其放在首頁(yè)外框動(dòng)態(tài)面板的state1中，設(shè)置“menugroup(copy)”樣式為隱藏，如下圖所示：

• 為“首頁(yè)內(nèi)容”動(dòng)態(tài)面板添加移動(dòng)時(shí)用例，如下所示：
• case1：如果首頁(yè)內(nèi)容“動(dòng)態(tài)面板”向上移動(dòng)的距離大于136（其中136為導(dǎo)航欄外圍矩形框的y坐標(biāo)），即當(dāng)This.y<=-136時(shí)，就顯示“menugroup(copy)”；
• case2：否則，隱藏“menugroup(copy)”。

最后添加搜素框和手機(jī)頂部狀態(tài)欄，以更加逼真。至此已經(jīng)能實(shí)現(xiàn)頁(yè)面在向上滑動(dòng)過程中導(dǎo)航欄頂部吸附的效果了。

但細(xì)心的你會(huì)發(fā)現(xiàn)這里有一個(gè)問題：不論“首頁(yè)內(nèi)容”的導(dǎo)航欄選中的是全部還是附近，在頁(yè)面向上滑動(dòng)的過程中，出現(xiàn)頂部吸附效果時(shí)的導(dǎo)航欄始終選中全部，這是不對(duì)的。如何解決呢？看下面，2分鐘搞定~

• 再添加一個(gè)menugroup(copy)1，樣式同樣設(shè)為隱藏，與“menugroup(copy)”重疊放置。

• 只要在移動(dòng)“首頁(yè)內(nèi)容”動(dòng)態(tài)面板時(shí)，增加顯示“menugroup(copy)”還是“menugroup(copy)1”的判斷條件即可，按照下圖進(jìn)行設(shè)置即可，如下所示。

補(bǔ)充說明：“menugroup(copy)”中的“全部”，在引用頁(yè)面時(shí)，勾選選中，“附近”不勾選，見下圖。

而“menugroup(copy)1”中的“附近”，在引用頁(yè)面時(shí)，勾選選中，“全部”不勾選。

好了，done~

最終效果預(yù)覽：https://xydq37.axshare.com/#c=2

寫的比較倉(cāng)促，有些寫的不清楚的地方歡迎批評(píng)指正。

本文由 @南方碟道 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議