第一種方法：使用內(nèi)聯(lián)框架部件制作可滾動(dòng)內(nèi)容。

第一步：雙擊【站點(diǎn)地圖】面板中的page1，然后將準(zhǔn)備好的圖像素材img.png 拖放到設(shè)計(jì)區(qū)域，并調(diào)整圖像坐標(biāo)為（x:0，y:0），見圖25。

（圖25）

第二步：在【站點(diǎn)地圖】中雙擊index，拖放一個(gè)內(nèi)聯(lián)框架部件到設(shè)計(jì)區(qū)域中任意位置，并將其寬度設(shè)置為與 page1中的img.png寬度相同，高度700像素。

第三步：雙擊【內(nèi)聯(lián)框架】部件，在彈出的【鏈接屬性】對(duì)話框中選擇page1，見圖26。單擊【確定】按鈕關(guān)閉【鏈接屬性】對(duì)話框。

（圖26）

第四步：在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。

昆明網(wǎng)站建設(shè)筆者點(diǎn)評(píng)： 這種使用內(nèi)聯(lián)框架部件制作可滾動(dòng)內(nèi)容的局限性較大，如果只是簡單展示可滾動(dòng)內(nèi)容，可以采用。

推薦指數(shù)： 

第二種方法：使用動(dòng)態(tài)面板制作可滾動(dòng)內(nèi)容。

第一步：將準(zhǔn)備好的圖像素材img.png拖放到index頁面的設(shè)計(jì)區(qū)域，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】，給其命名為scrollable_content，設(shè)置該動(dòng)態(tài)面板尺寸為【300×700】像素，然后右鍵單擊該部件，在彈出的關(guān)聯(lián)菜單中選擇【滾動(dòng)條＞按需顯示垂直滾動(dòng)條】，見圖27。

（圖27）

單擊工具欄中的【預(yù)覽】按鈕，此時(shí)動(dòng)態(tài)面板中的內(nèi)容已經(jīng)可以滾動(dòng)了。但是，有些情況下，我們可能需要隱藏掉滾動(dòng)條，使用動(dòng)態(tài)面板的特性就可以輕松實(shí)現(xiàn)。

第二步：選中scrollable_content動(dòng)態(tài)面板，按下快捷鍵Ctrl/Command+D，快速復(fù)制一份，給新復(fù)制的動(dòng)態(tài)面板命名為scrollable_content_inside，然后右鍵單擊該部件，在彈出的關(guān)聯(lián)菜單中再次選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】，給轉(zhuǎn)換后的動(dòng)態(tài)面板命名為scrollable_content_outside，然后調(diào)整其寬度，將滾動(dòng)條遮擋起來即可，見圖28。

（圖28）

昆明網(wǎng)站制作筆者點(diǎn)評(píng)： 這種使用動(dòng)態(tài)面板部件制作可滾動(dòng)內(nèi)容的靈活性較強(qiáng)，如果只是簡單展示可滾動(dòng)內(nèi)容，推薦采用。

推薦指數(shù)： 

第三種方法：使用動(dòng)態(tài)面板制作可拖動(dòng)內(nèi)容。

拖放 img.png 到設(shè)計(jì)區(qū)域，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】，給其命名為scrollable_content。選中該部件，在右側(cè)部件【屬性】面板中雙擊【拖動(dòng)時(shí)】事件，在彈出的【用例編輯器】中新增【移動(dòng)】動(dòng)作，在右側(cè)【配置動(dòng)作】中勾選scrollable_content動(dòng)態(tài)面板中的圖像，并設(shè)置其移動(dòng)為【垂直拖動(dòng)】，見圖29。單擊【確定】按鈕關(guān)閉【用例編輯器】。

（圖29）

單擊【預(yù)覽】按鈕，在瀏覽器中測(cè)試。此時(shí)動(dòng)態(tài)面板中的圖像已經(jīng)可以垂直拖動(dòng)了，但是我們遇到了案例15中的問題，內(nèi)容可以滑出動(dòng)態(tài)面板的范圍。在Axure RP8中有兩種方法可以解決這個(gè)問題，一種是我們?cè)诨瑒?dòng)解鎖案例中使用的方法，另一種是使用Axure RP8新特性來實(shí)現(xiàn)，下面分別進(jìn)行詳細(xì)介紹。

使用邊界約束（Axure RP8新特性）

第一步：雙擊scrollable_content動(dòng)態(tài)面板，在彈出的【動(dòng)態(tài)面板狀態(tài)管理】對(duì)話框中雙擊State1，進(jìn)入狀態(tài)1，這里的藍(lán)色邊框范圍就是動(dòng)態(tài)面板的尺寸，見圖30，超出這個(gè)范圍的內(nèi)容都不會(huì)顯示。通過上下拖動(dòng)img. png圖像我們可以觀察到，img.png圖像向上拖動(dòng)時(shí)，y坐標(biāo)最大不能超過-1022像素，向下拖動(dòng)y坐標(biāo)最大不能超過0像素。也就是說，我們只需約束img.png圖像的頂部坐標(biāo)大于-1022并且小于0即可。

（圖30）

第二步：選中scrollable_content動(dòng)態(tài)面板，在右側(cè)部件【屬性】面板中雙擊【拖動(dòng)時(shí)】事件下的【移動(dòng)】動(dòng)作，在彈出的【用例編輯器】右下角點(diǎn)擊兩次【添加邊界】，并對(duì)頂部進(jìn)行約束即可，見圖31。單擊【確定】按鈕關(guān)閉【用例編輯器】。

第三步：如果你的操作沒有錯(cuò)誤，邊界約束已經(jīng)可以正常工作了，在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。

（圖31）

使用條件約束

第一步：將 img.png圖像拖放到設(shè)計(jì)區(qū)域，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】，給其命名為scrollable_content，并設(shè)置其高度為700像素。

第二步：選中scrollable_content動(dòng)態(tài)面板，在右側(cè)部件【屬性】面板中雙擊【拖動(dòng)時(shí)】事件，在彈出的【用例編輯器】對(duì)話框中新增【移動(dòng)】動(dòng)作，在右側(cè)的配置動(dòng)作中勾選scrollable_content動(dòng)態(tài)面板中的圖像，并設(shè)置其移動(dòng)為【垂直拖動(dòng)】，見圖32。單擊【確定】按鈕關(guān)閉【用例編輯器】。

第三步：選中scrollable_content動(dòng)態(tài)面板，繼續(xù)在右側(cè)部件【屬性】面板中單擊【更多事件＞＞＞】，在下拉列表中選擇【向上拖動(dòng)結(jié)束時(shí)】，在彈出的【用例編輯器】頂部單擊【添加條件】，在彈出的【條件編輯器】中，單擊左側(cè)的下拉列表并選擇【值】，見圖33-A。然后單擊【fx】，見圖33-B。在彈出的【編輯文本】對(duì)話框中單擊【添加局部變量】，在中間的下拉列表中選擇【部件】，右側(cè)下拉列表中選擇【圖像】，如圖34所示。繼續(xù)單擊【插入變量或函數(shù)…】，在下拉列表中選擇局部變量 LVAR1，并將其修改為[[LVAR1.y]]，意思是【圖像部件的y坐標(biāo)】，見圖35。

（圖32）

（圖33）

（圖34）

（圖35）

單擊【確定】按鈕關(guān)閉【編輯文本】對(duì)話框，在【條件編輯器】中進(jìn)行如圖36所示的設(shè)置，意思是“如果圖像的y坐標(biāo)小于-1022像素”，單擊【確定】按鈕關(guān)閉【條件編輯器】，現(xiàn)在條件編輯完畢，繼續(xù)在【用例編輯器】中新增【移動(dòng)】動(dòng)作。在右側(cè)【配置動(dòng)作】中勾選【圖像】，設(shè)置其移動(dòng)為【絕對(duì)】，坐標(biāo)（x:0，y:-1022），動(dòng)畫【搖擺】，時(shí)間【200】毫秒，見圖37。

意思是，如果圖像部件的y坐標(biāo)小于-1022像素，就將其移動(dòng)到絕對(duì)位置（0，-1022）。

（圖36）

（圖37）

第四步：同樣的原理，當(dāng)向下拖動(dòng)時(shí)，如果圖像部件的y坐標(biāo)大于0，就移動(dòng)圖像部件到絕對(duì)位置（0，0），如圖38。單擊【確定】按鈕關(guān)閉【用例編輯器】。

（圖38）

第五步：至此，使用條件約束的上下滑動(dòng)交互就制作完畢了。在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。

筆者點(diǎn)評(píng)： 在制作高保真原型時(shí)都會(huì)使用到這種方法，比如下拉刷新交互效果。其優(yōu)點(diǎn)是靈活、保真度高，但需要扎實(shí)的基礎(chǔ)知識(shí)。

推薦指數(shù)：