當前位置: 首頁 > 攻略教程 > 軟件教程 > axure制作手機滾動條效果的操作步驟

axure制作手機滾動條效果的操作步驟

時間:2024-06-26 12:26:23 編輯:易網VIP游戲門戶 閱讀:0

大家知道axure制作手機滾動條效果嗎?下文小編就帶來了在axure制作手機滾動條效果的簡單使用教程,一起來看看吧!

axure制作手機滾動條效果的操作步驟

axure制作手機滾動條效果的操作步驟

1、打開axure軟件,點擊新建,然后將手機模型拖拽進axure,點擊“動態(tài)面板”將其往編輯窗口拖拽。如下圖

axure制作手機滾動條效果的操作步驟截圖

2、創(chuàng)建好動態(tài)面板之后,按住“ctrl+c”將其復制下來,然后雙擊“外層動態(tài)面板”下面的state1,然后按住“ctrl+v”將“外層動態(tài)面板”復制下來

axure制作手機滾動條效果的操作步驟截圖

3、然后將復制下來的“外層動態(tài)面板”的名字改為“內層動態(tài)面板”,然后雙擊“內層動態(tài)面板”下面的“state1”,進入之后,將光標放置于該編輯頁內,然后點擊鼠標右鍵,點擊“滾動條”,“自動顯示垂直滾動條”。這時候就會發(fā)現我們的“內層動態(tài)面板”下的“state1”已經有一個滾動條,如下圖

axure制作手機滾動條效果的操作步驟截圖

4、滾動條做好之后,需要給動態(tài)面板添加內容,點擊“占位符”,并將其拖到動態(tài)面板內。

axure制作手機滾動條效果的操作步驟截圖

5、由于要體現的是一種滾動狀態(tài),所以內容必須要長于我們的動態(tài)面板所顯示的范圍,所以需要多次添加內容,按住“ctrl”拖動剛才建立的“占位符”,即可復制。如下圖。

axure制作手機滾動條效果的操作步驟截圖

6、如果想要區(qū)分這些占位符,可以雙擊該占位符,然后向其中輸入自己想要的數據,如下圖

axure制作手機滾動條效果的操作步驟截圖

7、然后可以預覽我們做出來的效果了,按住F5,或者點擊上面的“預覽”,進入網頁之后,上下滾動鼠標即可看出效果了。

axure制作手機滾動條效果的操作步驟截圖

8、這時候,覺得滾動條那么難看,這時候返回我們的axure頁面,直接點擊“外層動態(tài)面板”,然后將“內層”面板的滾動條拖拽到“外層動態(tài)面板”的外面,如下圖。

axure制作手機滾動條效果的操作步驟截圖

9、然后可以預覽做出來的效果了,按住F5,或者點擊上面的“預覽”,進入網頁之后,上下滾動鼠標即可看出效果了。

axure制作手機滾動條效果的操作步驟截圖

上文就講解了axure制作手機滾動條效果的操作步驟,希望有需要的朋友都來學習哦。