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

瀏覽網(wǎng)頁時，我們經(jīng)?？吹秸翝L動效果的首頁設(shè)計，如招商銀行首頁：當鼠標上下滾動時，不同頁面進行翻頁展示。

此教程將講解如何實現(xiàn)此效果：

一、界面元件搭建

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

預覽效果如下：

二、交互事件實現(xiàn)

起初的想法，是想在【內(nèi)容】動態(tài)面板上，添加【向上滾動時】和【向下滾動時】的交互事件；但是，由于面板的內(nèi)容寬高是自適應(yīng)的，沒有出現(xiàn)滾動條，因此，鼠標的滾動事件無法觸發(fā)。

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

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

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

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

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