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

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

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

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

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

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

2、設(shè)置交互

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

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

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

（2）還是選擇“拖動(dòng)結(jié)束時(shí)”，添加用例2，設(shè)置條件：當(dāng)This（當(dāng)前元件，也就是指“content_area”動(dòng)態(tài)面板）的y值小于某個(gè)值時(shí)，“content_area”會(huì)被移動(dòng)到這個(gè)值的位置。這一用例實(shí)現(xiàn)的效果就是：當(dāng)滑動(dòng)內(nèi)容到屏幕最底部無內(nèi)容時(shí)，無法再繼續(xù)滑動(dòng)下去。那么這個(gè)值是多少呢？這個(gè)值就是當(dāng)“content_area”的底部和“rolling_area”的底部重疊時(shí)“content_area”的y值，稍微思考一下，這個(gè)值就是“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值<某個(gè)值（LVAR1.height-This.height）時(shí)，移動(dòng)“content_area”到這個(gè)“某個(gè)值”（LVAR1.height-This.height）。

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

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

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