axure商城

Axure制作移動端菜單頂部吸附效果教程

本文轉載自小樓老師博客:http://www.iaxure.com/5342.html

大家先來看一個效果圖,思考一下這個效果怎么實現?

圖1

 

首先,移動端內容的上下滑動,只需要將相應內容放入動態面板,并在該動態面板屬性中添加垂直滾動條即可。這樣,當我們在手機上打開原型時,即可通過手指的拖動而上下滑動。動態面板的滾動條必須設置,但在手機瀏覽器中并不會出現滾動條。

注意,全屏內容上下滑動,需要將動態面板設置為標準尺寸(見圖2),并在HTML設置中進行【移動設備】設置,勾選【包含視口標簽】選項(見圖3)。

圖2

圖3

然后,我們分析一下這個效果的交互過程。

1、交互什么時候觸發?

答:動態面板內容滾動的時候。

2、分別有幾種情形?

答:兩種情形,一種是內容滾動超過指定的距離,一種是未超過指定的距離。

3、需要判斷什么內容?

答:需要判斷動態面板內容滾動的距離。

4、動態面板內容的滾動距離怎么獲取?

答:通過系統變量“scrollY”。

好了,分析完畢,下面是實現過程。

  • 先準備元件。

頁面中放入元件內容。分別是1個廣告圖片,3個制作菜單的矩形,N個三級標題和文本段落。把3個制作菜單的矩形,按著Ctrl鍵依次點擊選中,然后,點擊上方功能區中的【組合】圖標或者快捷鍵組合到一起,并命名為“MenuGroup”。最后,全選這些內容,點擊鼠標右鍵,在菜單中選擇【轉換為動態面板】。(圖4)

圖4

2、在動態面板的屬性中,設置動態面板【自動顯示垂直滾動條】。(圖5)

圖5

3、為動態面板添加交互。(圖5)

一共包含2個用例(Case):

用例1:對動態面板滾動距離是否超過150進行判斷,設置條件【值】【[[This.scrollY]]】【>=】【值】【150】。系統變量“This”表示當前元件,“scrollY”表示滾動距離。(圖6)

圖6

當符合以上條件時,我們需要【移動】菜單“MenuGroup”,【到達】x軸“0”/y軸“[[This.scrollY]]”的位置。“[[This.scrollY]]”就是動態面板內容滾動的距離,也就是動態面板內容滾動時,上邊緣那一線內容的y軸坐標位置。在動態面板內容滾動時,將菜單“MenuGroup”移動到這個位置,就是將它時時移動到動態面板上邊緣的位置,也就是頂部吸附效果。(圖7)

圖7

用例2:當不符合用例1的條件時,也就是動態面板內容的滾動距離小于150的時候,我們需要再填加一個用例2,即不符合條件的情形,并設置動作【移動】菜單“MenuGroup”,【到達】x軸“0”/y軸“150”的初始位置。

以上就是移動端菜單頂部吸附效果實現的分析與過程。大家不難發現,其實使用變量與函數并不復雜,關鍵在與知道函數的用途與使用方法。這些系統變量與函數的使用方法,在我編撰的一系列圖書中(例如:Axure RP8實戰手冊)都有詳細的講解,大家可以閱讀參考。

所以,原型中使用函數,旨在解決問題和提高效率,不要刻意去使用,也不要對其有偏見而放棄使用。

源文件下載地址:【點此下載】

給TA買糖
共{{data.count}}人
人已贊賞
高級教程

Axure巧用“保留邊角”功能編輯頁面截圖

2017-2-5 16:03:31

高級教程

使用Axure管理團隊項目圖文教程 團隊協作操作步驟

2017-4-12 14:58:53

axure商城
2 條回復 A文章作者 M管理員
  1. Jesse112506

  2. 183****5154
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo