第一種方法：使用內聯框架部件制作可滾動內容。

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

（圖25）

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

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

（圖26）

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

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

推薦指數： 

第二種方法：使用動態面板制作可滾動內容。

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

（圖27）

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

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

（圖28）

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

推薦指數： 

第三種方法：使用動態面板制作可拖動內容。

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

（圖29）

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

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

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

（圖30）

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

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

（圖31）

使用條件約束

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

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

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

（圖32）

（圖33）

（圖34）

（圖35）

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

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

（圖36）

（圖37）

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

（圖38）

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

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

推薦指數：