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

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

（圖25）

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

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

（圖26）

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

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

推薦指數(shù)： 

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

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

（圖27）

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

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

（圖28）

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

推薦指數(shù)： 

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

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

（圖29）

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

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

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

（圖30）

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

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

（圖31）

使用條件約束

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

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

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

（圖32）

（圖33）

（圖34）

（圖35）

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

意思是，如果圖像部件的y坐標小于-1022像素，就將其移動到絕對位置（0，-1022）。

（圖36）

（圖37）

第四步：同樣的原理，當向下拖動時，如果圖像部件的y坐標大于0，就移動圖像部件到絕對位置（0，0），如圖38。單擊【確定】按鈕關閉【用例編輯器】。

（圖38）

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

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

推薦指數(shù)：