在實際生產(chǎn)過程中我們發(fā)現(xiàn)Axure的動態(tài)面板原件可以提供強大的功能，比如滾動條，但是滾動條只能以原生效果展示，無法對其展示樣式進行編輯。Axure的滾動條的丑就屬于結(jié)構(gòu)性問題，我們無法解決這個問題但是可以繞過，即讓別人看到的Axure原型滾動條是我們想讓對方看到的滾動條。

一、準備素材

這里用微信的界面來做展示，準備素材（筆者這里主要用了動態(tài)面板和中繼器，嗯，在動態(tài)面板中充當內(nèi)容的中繼器），拼搭出微信的界面，并準備好你想要的滾動條樣式，長度隨意，因為我們會在其載入時來控制具體的長度。

接下來將該動態(tài)面板的滾動條展示出來，“右鍵”->“滾動條”->“自動顯示垂直滾動條”

增加動態(tài)面板的寬度（原寬度+18），然后在用一塊寬17的控件將整個滾動條覆蓋住，并調(diào)整顏色，使其重新恢復(fù)第一張圖的效果

此時你就會發(fā)現(xiàn)你已經(jīng)獲得了一個隱藏了滾動條的動態(tài)面板

二、準備交互

從這一步開始是相對比較重要的工作，這里我們需要清楚如何進行交互達到讓別人看到我們想給他們看到的“滾動條”的目的，可能有點繞，但簡單來說，就是具體實現(xiàn)的邏輯。

說出來你可能不信，這比把大象關(guān)進冰箱里要簡單，因為邏輯上只需要兩步：

1. 在頁面載入時，將滾動條調(diào)整為制定的比例
2. 在頁面滾動時，相應(yīng)的移動滾動條的位置

是不是很簡單？

正式開始準備交互：

第一個公式 – 滾動條的高度

• “滾動條的高度”=“動態(tài)面板高度”*“動態(tài)面板高度”/“動態(tài)面板中內(nèi)容的高度”

大家知道滾動條是根據(jù)一定比例顯示的，這樣的比例控制可以使?jié)L動條在頁面滾動到頂端和低端時，“滾動條（flower）”老老實實的待在界面內(nèi)而不會出墻，這里的墻就是“動態(tài)面板（wall）”，而“動態(tài)面板中內(nèi)容的高度（content）”在這里就是中繼器的高度。

如上圖所示，“滾動條高度”=wall.height*wall.height/content.height

第二個公式 – 滾動條的移動

• “滾動條的動態(tài)位置”=“滾動條的初始位置”+“動態(tài)面板滾動的y值”*“動態(tài)面板高度”/“動態(tài)面板中內(nèi)容的高度”

這里用的詞是“滾動條的動態(tài)位置”而不是“滾動條的位移”，因為實際上是在每次進行滾動操作之后將滾動條移動到對應(yīng)的位置，而不是實時一個像素一個像素的跟隨移動。有“初始位置”是因為要用“絕對位移”，為什么要用“絕對位移”？好奇的朋友們可以自己用相對位移實驗一下，后面也會提到。

“動態(tài)面板滾動的y值”*“動態(tài)面板高度”/“動態(tài)面板中內(nèi)容的高度”這部分也不難理解，因為“墻”的高度有限，內(nèi)容滾動過的距離只能按比例的體現(xiàn)在滾動條的移動距離上。

三、交互制作

為控件命名

注意：在做交互的時候控件或者組一定要命名?。?！

控件命名如下圖：

初始化滾動條

選中滾動條，添加載入事件

設(shè)置當前（滾動條）元件的尺寸

添加對應(yīng)局部變量（動態(tài)面板和中繼器），按照公式1編輯當前元件的尺寸值

移動滾動條

選中動態(tài)面板，添加“滾動時”事件

動態(tài)面板滾動時移動滾動條至相應(yīng)位置，這里是用“絕對位移”，并且一定要添加動畫，時間看自己需求

X的位置不變但是因為是絕對位移，所以這里的值要填寫滾動條的x坐標，在添加相應(yīng)的局部變量后，再編輯y公式。

“初始y值”比較好理解就是滾動條在載入時的縱坐標；

動態(tài)面板滾動的y值，可以這么理解，動態(tài)面板是靜止不動的，而其中的內(nèi)容每次上下移動的之后，內(nèi)容頂端距離動態(tài)面板頂端的距離，這個值總是正值，這也是無法用“相對位移”來處理的原因。

顯示、隱藏

微信滾動條效果簡化為“移動時顯示，移動結(jié)束后隱藏”，但是動態(tài)面板并沒有滾動結(jié)束的選項，這里可以設(shè)置一個等待事件來等滾動條就位后再隱藏，也可以達到相應(yīng)的效果。

四、最后

這里筆者用的素材比較樸素，大家可以自行給滾動條加效果，什么光圈、濾鏡都可以。

關(guān)于拖動效果的滾動條，其實也能做，真正做到微信的效果也是可以的，只是不可能模擬的那么流暢，大家可以自己研究下拖動的，拖動效果有個拖動結(jié)束事件還是很好用的。

作者：慕卿風華，爬行動物產(chǎn)品經(jīng)理，4年互聯(lián)網(wǎng)行業(yè)，2年產(chǎn)品經(jīng)驗。

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

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