Axure RP8 教程:實現高逼格的面板切換效果

如何利用Axure RP8 教程實現高逼格的面板切換效果呢？一起來文中看看~

瀏覽網頁時，我們經常看到整屏滾動效果的首頁設計，如招商銀行首頁：當滑鼠上下滾動時，不同頁面進行翻頁展示。

此教程將講解如何實現此效果：

一、界面元件搭建

首先，拉入一個動態面板，命名為「內容」，再為其添加2個動態，為這三個狀態面板的添加一些元件，（狀態裡面的元件內容隨大家喜好自行添加，主要是演示面板的切換效果），本教程的動態面板界面效果如下：

預覽效果如下：

二、交互事件實現

起初的想法，是想在【內容】動態面板上，添加【向上滾動時】和【向下滾動時】的交互事件；但是，由於面板的內容寬高是自適應的，沒有出現滾動條，因此，滑鼠的滾動事件無法觸發。

最後想到通過添加另一個動態面板，命名為【控制面板】，設置寬高與內容面板一致，為其內容添加一個長高度的熱區，即能使面板出現滾動條。再添加【向上滾動時】和【向下滾動時】的交互事件來控制【內容】動態面板的切換。效果如下：

接下來，我們只需要將此這控制面板的滾動條隱藏即可，實現方法為：將此動態面板再轉化為動態面板，將此動態面板的寬度減少20，即少去滾動條的寬度。最終的實現效果如下：

 

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}