文章主要跟大家介紹，如何利用Axure制作上下翻動效果，一起來看看~

主要是用Axure做手機APP，内容翻動的效果如何實現：

1. 讓内容在顯示區域滾動；
2. 内容面闆沒有接觸到頂部時，讓内容面闆移動至頂部；
3. 内容面闆接觸到頂部，沒有接觸到底部時，把内容面闆的底部定位到底部元件位置。

1. 元件布局

将頂部和底部矩形、動态面闆顯示區域先放置好，設置相同的寬度，高度自定，無縫銜接在一起。

以頂部為例，從元件庫中選擇矩形1拉入畫闆中，雙擊矩形編寫文字頂部，之後調整頂部的寬和高，如果寬和高固定了，你點擊上圖步驟4中箭頭所指位置的藍色小點，去除鎖定即可修改，最後在右下角頁面中雙擊矩形命名為頂部，同理可得底部。

顯示區域是動态面闆同樣是從元件庫中選中拉入畫闆中，命名方式有兩種，1種在面闆選中的情況下，直接在右上角3的區域填寫；第2種則是在右下角頁面處雙擊動态面闆彈框中命名，如右下角的3區域。

顯示區域除了長寬要設置，還有最左上端的坐标，要承接頂部最坐下端坐标，X軸為0，Y軸為頂部高。

内容區域也是動态面闆，但是，生成方式跟顯示面闆不同，敲黑闆這部分是關鍵，初學看了其他的教程摸索很久才弄懂。内容區域是在顯示面闆的state1裡面實現的，雙擊state1進入，然後從元件庫拉入新的畫闆中。設置内容畫闆寬度同其他元件，高度比顯示區域大。圖中忘了截圖内容區域命名後的，别忘了要命名。

2. 填充内容面闆

雙擊内容面闆中的state1，填充一些元素，方便查看滾動效果，記得操作完要回到首頁。

3. 添加事件

1）讓内容在顯示區域滾動

2）内容面闆沒有接觸到頂部時，讓内容面闆移動至頂部；意思是你拉下來頁面，讓内容面闆上部沒有接觸到頂部時，會自動回到頂部。

先編輯條件，内容面闆未接觸頂部時；

讓内容面闆移動到頂部，即絕對位置。

3）内容面闆接觸到頂部，沒有接觸到底部時，把内容面闆的底部定位到底部元件位置。

先編輯條件，内容面闆接觸到頂部，但未接觸底部。

讓内容面闆移動到底部，移動距離=顯示面闆高度-内容面闆高度（為負數）。

确認之後預覽即可。

本文由 @粉小妞Holly 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部