Axure技巧中，APP端的內(nèi)容滾動(dòng)效果是一個(gè)很基礎(chǔ)的交互。之前也有很多大牛分享過如何操作，今天分享的是更為簡(jiǎn)單的方法，希望對(duì)大家有用。

兩種實(shí)現(xiàn)方式

實(shí)現(xiàn)方式1

要點(diǎn)說明：使用兩個(gè)動(dòng)態(tài)面板和兩個(gè)熱區(qū)實(shí)現(xiàn)的，外面的動(dòng)態(tài)面板做移動(dòng)端窗口，內(nèi)嵌一個(gè)動(dòng)態(tài)面板，里面要放的所有的內(nèi)容（可以很長(zhǎng)很長(zhǎng)），窗口頂部和底部分別一個(gè)超小的熱區(qū)，然后通過鼠標(biāo)的位置和熱區(qū)的位置判斷是否讀到了頁(yè)面的底部或頂部，一旦到了就移動(dòng)內(nèi)部的動(dòng)態(tài)面板，從而實(shí)現(xiàn)看到第N屏的內(nèi)容

實(shí)現(xiàn)過程：參考此鏈接：http://blog.csdn.net/qwsx789/article/details/46516153（找不到自己當(dāng)初參考的鏈接了，基本就是這個(gè)方法，有興趣的可以進(jìn)去看一下）；還有個(gè)更復(fù)雜的辦法：https://www.zhihu.com/question/20417830（我沒有嘗試過，看著就蠻麻煩的）

缺點(diǎn)：方法真的蠻復(fù)雜的，我大概只實(shí)現(xiàn)了70%，有了基本的演示效果，就沒有實(shí)現(xiàn)全這個(gè)功能了。最大的缺點(diǎn)在于修改原型的時(shí)候真的蠻痛苦的，要點(diǎn)進(jìn)窗口動(dòng)態(tài)面板，再點(diǎn)進(jìn)內(nèi)嵌的動(dòng)態(tài)面板，再點(diǎn)進(jìn)對(duì)應(yīng)的狀態(tài)，再修改。。。OH NO。。。

實(shí)現(xiàn)方式2（簡(jiǎn)便）

方法來源：之前報(bào)了個(gè)起點(diǎn)學(xué)院的課程，里面的一個(gè)BAT大神級(jí)別的資深產(chǎn)品經(jīng)理教的（大神都這么用，大公司都這么用，嗯，我們肯定也可以這么用。關(guān)鍵是? 這個(gè)方法真的是**的簡(jiǎn)便啊）。

要點(diǎn)說明：直接使用（Axure8）動(dòng)態(tài)面板的“自動(dòng)顯示滾動(dòng)條”功能，然后找個(gè)能跟你的原型想融合的矩形/圖片，把滾動(dòng)條擋住就OK了。（我感覺我說完這個(gè)后面就不用寫了，真的是太簡(jiǎn)便啦。你是不是已經(jīng)會(huì)了？）

實(shí)現(xiàn)過程：

1.拖一個(gè)手機(jī)框、拖一個(gè)動(dòng)態(tài)面板；

2.編輯動(dòng)態(tài)面板的state1，往里面任性的塞內(nèi)容吧；（注意寬度）

3.設(shè)置動(dòng)態(tài)面板“自動(dòng)顯示滾動(dòng)條”

4.按F5預(yù)覽效果，發(fā)現(xiàn)有滾動(dòng)條；

5.把手機(jī)的右邊框截圖，然后作為圖片素材；拉寬動(dòng)態(tài)面板，讓滾動(dòng)條區(qū)域到手機(jī)屏幕區(qū)域的右側(cè)，再把手機(jī)右邊框圖片素材置頂，蓋住會(huì)顯示滾動(dòng)條的部分；

6.按F5預(yù)覽效果，“以假亂真”，又真又簡(jiǎn)單。

好了，結(jié)束。

作者：淺若伊淚，一只仍然還在入門的產(chǎn)品小白~

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

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