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

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

（圖25）

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

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

（圖26）

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

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

推薦指數： 

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

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

（圖27）

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

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

（圖28）

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

推薦指數： 

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

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

（圖29）

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

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

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

（圖30）

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

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

（圖31）

使用條件約束

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

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

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

（圖32）

（圖33）

（圖34）

（圖35）

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

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

（圖36）

（圖37）

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

（圖38）

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

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

推薦指數：