本文主要分享一個運(yùn)用Axure制作移動端內(nèi)容滾動區(qū)的過程，與大家分享，希望有所啟發(fā)。

制作一個簡單的移動端內(nèi)容滾動區(qū)，兩個動態(tài)面板就夠了！

1、材料的準(zhǔn)備

（1）滾動區(qū)域：從元件庫中的基本元件中拖入一個動態(tài)面板到線框圖面板中，將其命名為“rolling_area”，這是滾動區(qū)的意思，表示網(wǎng)頁內(nèi)容的滾動范圍，設(shè)置width=360，height=600。

（2）內(nèi)容區(qū)域：雙擊“rolling_area”動態(tài)面板，進(jìn)入“State1”。繼續(xù)向線框圖面板中拖入一個動態(tài)面板，將其命名為“content_area”,這是內(nèi)容區(qū)的意思，設(shè)置width=360，height=800，表示所要瀏覽的內(nèi)容有800高度。

（3）具體內(nèi)容：雙擊“content_area”動態(tài)面板，進(jìn)入“State1”編輯內(nèi)容。在這里我用高度為800的填充了不同色塊的矩形來表示具體內(nèi)容。畫這個矩形以及設(shè)置“content_area”的高度為800都是為了后面預(yù)覽時可以看出滾動的效果。

2、設(shè)置交互

（1）首先，要實現(xiàn)縱向滑動屏幕可以瀏覽內(nèi)容的效果。點擊“content_area”動態(tài)面板，在右側(cè)的交互設(shè)置里面選擇“拖動時”，然后選擇移動“content_area”，并且設(shè)置為“垂直移動”，如下圖設(shè)置后，點擊“確定”。

現(xiàn)在，我們可以先按F5鍵預(yù)覽一下。這時，你可以體驗到鼠標(biāo)拖動滾動區(qū)內(nèi)的色塊矩形時，內(nèi)容會上下垂直移動了。但有個問題，就是內(nèi)容會無限地上下移動，而不像我們平時使用手機(jī)瀏覽頁面，當(dāng)拖動頁面到頂部或者底部沒有內(nèi)容時會被彈回來。那么這時，我們則需要通過控制“content_area”y值的范圍來控制具體內(nèi)容移動的區(qū)域。

（1）點擊“content_area”，選擇“拖動結(jié)束時”，編輯用例1，設(shè)置條件如下圖，作用是當(dāng)“content_area”移動到y(tǒng)值大于0時可以被彈回來。

（2）還是選擇“拖動結(jié)束時”，添加用例2，設(shè)置條件：當(dāng)This（當(dāng)前元件，也就是指“content_area”動態(tài)面板）的y值小于某個值時，“content_area”會被移動到這個值的位置。這一用例實現(xiàn)的效果就是：當(dāng)滑動內(nèi)容到屏幕最底部無內(nèi)容時，無法再繼續(xù)滑動下去。那么這個值是多少呢？這個值就是當(dāng)“content_area”的底部和“rolling_area”的底部重疊時“content_area”的y值，稍微思考一下，這個值就是“rolling_area”的高度減去“content_area”的高度，用公式表示就是“rolling_area.height-content_area.height”，但是由于我們當(dāng)前是在“rolling_area”的“State1”狀態(tài)，無法直接操作到元件“rolling_area”，所以我們只能通過插入局部變量來操作到“rolling_area”，于是如下圖，插入局部變量LVAR1（表示元件“rolling_area”）。

然后再來設(shè)置當(dāng)“content_area”的y值<某個值（LVAR1.height-This.height）時，移動“content_area”到這個“某個值”（LVAR1.height-This.height）。

到此，我們按F5鍵預(yù)覽，用鼠標(biāo)拖動色塊矩形，就可以體驗到平日里在手機(jī)上瀏覽頁面的效果啦！

這是一個通用的滾動區(qū)，我們可以通過改變滾動區(qū)（rolling_area）的高度或者寬度來控制網(wǎng)頁內(nèi)容的滾動范圍。

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