在實(shí)際的制作過(guò)程中，我們發(fā)現(xiàn)Axure的動(dòng)態(tài)面板原件可以提供強(qiáng)大的功能，例如滾動(dòng)條，但滾動(dòng)條只能以原生效果顯示，并且無(wú)法編輯它們的顯示樣式。 Axure滾動(dòng)條的丑陋是一個(gè)結(jié)構(gòu)性問(wèn)題。我們無(wú)法解決這個(gè)問(wèn)題，但可以繞過(guò)它。其他人看到的Axure原型滾動(dòng)條是我們希望對(duì)方看到的滾動(dòng)條。

首先，準(zhǔn)備材料

這里我們使用微信界面來(lái)顯示，準(zhǔn)備材料（這里我主要使用動(dòng)態(tài)面板和中繼器，嗯，充當(dāng)動(dòng)態(tài)面板中的轉(zhuǎn)發(fā)器），把微信接口放在一起，為你準(zhǔn)備你想要的滾動(dòng)條樣式是免費(fèi)的，因?yàn)槲覀儗⒃诩虞d時(shí)控制特定長(zhǎng)度。

接下來(lái)，顯示動(dòng)態(tài)面板的滾動(dòng)條，“右鍵單擊” - >“滾動(dòng)條” - >“自動(dòng)顯示垂直滾動(dòng)條”

增加動(dòng)態(tài)面板的寬度（原始寬度+18），然后覆蓋整個(gè)滾動(dòng)條，寬度為17個(gè)控件，并調(diào)整顏色以恢復(fù)第一個(gè)圖像的效果

此時(shí)，您將發(fā)現(xiàn)已獲得帶有隱藏滾動(dòng)條的動(dòng)態(tài)面板

第二，準(zhǔn)備互動(dòng)

從這一步開(kāi)始是一項(xiàng)相對(duì)重要的工作。在這里，我們需要知道如何進(jìn)行交互，以便其他人可以看到我們想要為他們看到的內(nèi)容。滾動(dòng)條的目的可能有點(diǎn)左右，但簡(jiǎn)單來(lái)說(shuō)，它是特定的。實(shí)施的邏輯。

假設(shè)你可能不相信它，它比將大象放入冰箱更容易，因?yàn)樗恍柽壿嬌蟽刹剑?/p>

在頁(yè)面加載時(shí)將滾動(dòng)條調(diào)整到刻度。

頁(yè)面滾動(dòng)時(shí)相應(yīng)滾動(dòng)條的位置

這很簡(jiǎn)單嗎？

正式開(kāi)始準(zhǔn)備互動(dòng)：

第一個(gè)公式–滾動(dòng)條的高度

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

每個(gè)人都知道滾動(dòng)條按照一定的比例顯示。當(dāng)頁(yè)面滾動(dòng)時(shí)，這種比例控制可以使?jié)L動(dòng)條滾動(dòng)到頂部和底部，并且滾動(dòng)條（花）誠(chéng)實(shí)地停留在界面中而不會(huì)外出。墻，這里的墻是“動(dòng)態(tài)面板”，動(dòng)態(tài)面板中內(nèi)容的高度是轉(zhuǎn)發(fā)器的高度。

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

第二個(gè)公式–滾動(dòng)條的移動(dòng)

“滾動(dòng)條的動(dòng)態(tài)位置”=“滾動(dòng)條的初始位置> +“動(dòng)態(tài)面板滾動(dòng)的y值" *“動(dòng)態(tài)面板高度< ldquo;內(nèi)容的高度動(dòng)態(tài)面板“/P>

這里使用的詞是“滾動(dòng)條的動(dòng)態(tài)位置”而不是“滾動(dòng)條的位移”，因?yàn)闈L動(dòng)條實(shí)際上??在每次滾動(dòng)操作之后移動(dòng)到相應(yīng)的位置，而不是實(shí)時(shí)地移動(dòng)一個(gè)像素。一個(gè)像素跟隨運(yùn)動(dòng)。有“初始位置”，因?yàn)槟阆胧褂谩敖^對(duì)位移”，為什么要使用“絕對(duì)位移”？好奇的朋友可以嘗試相對(duì)位移，這將在后面提到。

“動(dòng)態(tài)面板滾動(dòng)y值” *“動(dòng)態(tài)面板高度” /“動(dòng)態(tài)面板中內(nèi)容的高度”這部分不難理解，因?yàn)椤皦Α钡母叨扔邢蓿瑵L動(dòng)的內(nèi)容距離只能與滾動(dòng)條的移動(dòng)距離成正比。

三，互動(dòng)制作

命名控件

注意：在進(jìn)行交互時(shí)必須命名控件或組！

該控件的命名如下：

初始化滾動(dòng)條

檢查滾動(dòng)條以添加加載事件

設(shè)置當(dāng)前（滾動(dòng)條）組件的大小

添加相應(yīng)的局部變量（動(dòng)態(tài)面板和轉(zhuǎn)發(fā)器），根據(jù)公式1

移動(dòng)滾動(dòng)條

檢查動(dòng)態(tài)面板并添加“滾動(dòng)時(shí)事件

在動(dòng)態(tài)面板滾動(dòng)時(shí)將滾動(dòng)條移動(dòng)到相應(yīng)的位置。這是“絕對(duì)位移”，并確保添加動(dòng)畫(huà)以滿足您的需求

X的位置是相同的，但因?yàn)樗墙^對(duì)位移，這里的值是填充滾動(dòng)條的x坐標(biāo)。添加相應(yīng)的局部變量后，編輯y公式。

“最初的y值”更好地理解加載時(shí)滾動(dòng)條的縱坐標(biāo);

動(dòng)態(tài)面板滾動(dòng)的y值可以理解如下。動(dòng)態(tài)面板是靜止的，并且在向上和向下移動(dòng)內(nèi)容之后內(nèi)容始終與動(dòng)態(tài)面板的頂部相距一定距離。該值始終為正值。 “相對(duì)位移”處理原因。

顯示，隱藏

微信滾動(dòng)條的效果簡(jiǎn)化為“移動(dòng)時(shí)顯示，移動(dòng)結(jié)束后隱藏”，但動(dòng)態(tài)面板沒(méi)有滾動(dòng)結(jié)束選項(xiàng)。在這里，您可以設(shè)置等待事件以等待滾動(dòng)條到位，然后隱藏它。影響。

第四，最后一次

這里作者使用的材料相對(duì)簡(jiǎn)單，你可以將效果添加到滾動(dòng)條，什么光圈和濾鏡可以。

拖動(dòng)效果上的滾動(dòng)條實(shí)際上??可以完成。微信的效果也不錯(cuò)，但不可能如此順利地模擬它。您可以自己研究拖動(dòng)，拖動(dòng)效果具有拖動(dòng)結(jié)束事件。非常好用。

« 微型企業(yè)在網(wǎng)絡(luò)營(yíng)銷過(guò)程中容易產(chǎn)生的四個(gè)錯(cuò)誤 | 法拉第的最后一位高管離職：內(nèi)部員工透露公司已破產(chǎn) »