中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文將給大家介紹：如何在Axure中實現頁面上下活動和頂部吸附，一起來看看吧~

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

一、元素準備

• 首先在畫布中拖一個矩形框，寬度為375px，高度為675px，模擬手機屏幕大小；
• 然后在矩形框內添加一個動態面板，寬度：375px，高度597px，命名為“首頁外框”.
• 在“首頁外框”的state1里再添加一個動態面板，寬度：375px，高度1220px，命名為“首頁內容”。

1.上下滑動效果

點擊“首頁外框”動態面板添加?拖動時用例 ，拖動時：選擇移動“首頁內容”為垂直拖動，添加邊界：頂部<=0；頂部>=“首頁外框”動態面板高度-“首頁內容”動態面板高度。

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

2.為你推薦卡片左右滑動效果

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

3.導航欄（用于頂部吸附）

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

滑竿的動態效果有兩種實現方式：

1）使用動態面板，單擊菜單項進行動態面板切換，這里使用第二種方式。

2）不使用動態面板，使用移動事件，即鼠標單擊菜單項時，移動滑竿（直線段）到指定位置，具體操作如下：

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

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

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

4.信息流展示動態面板：命名為“content”

• 為“content”動態面板添加兩個狀態：state1和state2，用于內容切換。
• 鼠標單擊全部時，設置content為state1；鼠標單擊附近時，設置content為state2。

5.導航欄頂部吸附效果實現

將導航欄復制一份，命名為“menugroup(copy)”，將其放在首頁外框動態面板的state1中，設置“menugroup(copy)”樣式為隱藏，如下圖所示：

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

最后添加搜素框和手機頂部狀態欄，以更加逼真。至此已經能實現頁面在向上滑動過程中導航欄頂部吸附的效果了。

但細心的你會發現這里有一個問題：不論“首頁內容”的導航欄選中的是全部還是附近，在頁面向上滑動的過程中，出現頂部吸附效果時的導航欄始終選中全部，這是不對的。如何解決呢？看下面，2分鐘搞定~

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

• 只要在移動“首頁內容”動態面板時，增加顯示“menugroup(copy)”還是“menugroup(copy)1”的判斷條件即可，按照下圖進行設置即可，如下所示。

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

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

好了，done~

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

寫的比較倉促，有些寫的不清楚的地方歡迎批評指正。

本文由 @南方碟道 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議