第一種方法:使用內(nèi)聯(lián)框架部件制作可滾動內(nèi)容。
第一步:雙擊【站點地圖】面板中的page1,然后將準(zhǔn)備好的圖像素材img.png 拖放到設(shè)計區(qū)域,并調(diào)整圖像坐標(biāo)為(x:0,y:0),見圖25。
(圖25)
第二步:在【站點地圖】中雙擊index,拖放一個內(nèi)聯(lián)框架部件到設(shè)計區(qū)域中任意位置,并將其寬度設(shè)置為與 page1中的img.png寬度相同,高度700像素。
第三步:雙擊【內(nèi)聯(lián)框架】部件,在彈出的【鏈接屬性】對話框中選擇page1,見圖26。單擊【確定】按鈕關(guān)閉【鏈接屬性】對話框。
(圖26)
第四步:在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
昆明網(wǎng)站建設(shè)筆者點評: 這種使用內(nèi)聯(lián)框架部件制作可滾動內(nèi)容的局限性較大,如果只是簡單展示可滾動內(nèi)容,可以采用。
推薦指數(shù):
第二種方法:使用動態(tài)面板制作可滾動內(nèi)容。
第一步:將準(zhǔn)備好的圖像素材img.png拖放到index頁面的設(shè)計區(qū)域,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動態(tài)面板】,給其命名為scrollable_content,設(shè)置該動態(tài)面板尺寸為【300×700】像素,然后右鍵單擊該部件,在彈出的關(guān)聯(lián)菜單中選擇【滾動條>按需顯示垂直滾動條】,見圖27。
(圖27)
單擊工具欄中的【預(yù)覽】按鈕,此時動態(tài)面板中的內(nèi)容已經(jīng)可以滾動了。但是,有些情況下,我們可能需要隱藏掉滾動條,使用動態(tài)面板的特性就可以輕松實現(xiàn)。
第二步:選中scrollable_content動態(tài)面板,按下快捷鍵Ctrl/Command+D,快速復(fù)制一份,給新復(fù)制的動態(tài)面板命名為scrollable_content_inside,然后右鍵單擊該部件,在彈出的關(guān)聯(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 到設(shè)計區(qū)域,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動態(tài)面板】,給其命名為scrollable_content。選中該部件,在右側(cè)部件【屬性】面板中雙擊【拖動時】事件,在彈出的【用例編輯器】中新增【移動】動作,在右側(cè)【配置動作】中勾選scrollable_content動態(tài)面板中的圖像,并設(shè)置其移動為【垂直拖動】,見圖29。單擊【確定】按鈕關(guān)閉【用例編輯器】。
(圖29)
單擊【預(yù)覽】按鈕,在瀏覽器中測試。此時動態(tài)面板中的圖像已經(jīng)可以垂直拖動了,但是我們遇到了案例15中的問題,內(nèi)容可以滑出動態(tài)面板的范圍。在Axure RP8中有兩種方法可以解決這個問題,一種是我們在滑動解鎖案例中使用的方法,另一種是使用Axure RP8新特性來實現(xiàn),下面分別進行詳細(xì)介紹。
使用邊界約束(Axure RP8新特性)
第一步:雙擊scrollable_content動態(tài)面板,在彈出的【動態(tài)面板狀態(tài)管理】對話框中雙擊State1,進入狀態(tài)1,這里的藍色邊框范圍就是動態(tài)面板的尺寸,見圖30,超出這個范圍的內(nèi)容都不會顯示。通過上下拖動img. png圖像我們可以觀察到,img.png圖像向上拖動時,y坐標(biāo)最大不能超過-1022像素,向下拖動y坐標(biāo)最大不能超過0像素。也就是說,我們只需約束img.png圖像的頂部坐標(biāo)大于-1022并且小于0即可。
(圖30)
第二步:選中scrollable_content動態(tài)面板,在右側(cè)部件【屬性】面板中雙擊【拖動時】事件下的【移動】動作,在彈出的【用例編輯器】右下角點擊兩次【添加邊界】,并對頂部進行約束即可,見圖31。單擊【確定】按鈕關(guān)閉【用例編輯器】。
第三步:如果你的操作沒有錯誤,邊界約束已經(jīng)可以正常工作了,在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
(圖31)
使用條件約束
第一步:將 img.png圖像拖放到設(shè)計區(qū)域,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動態(tài)面板】,給其命名為scrollable_content,并設(shè)置其高度為700像素。
第二步:選中scrollable_content動態(tài)面板,在右側(cè)部件【屬性】面板中雙擊【拖動時】事件,在彈出的【用例編輯器】對話框中新增【移動】動作,在右側(cè)的配置動作中勾選scrollable_content動態(tài)面板中的圖像,并設(shè)置其移動為【垂直拖動】,見圖32。單擊【確定】按鈕關(guān)閉【用例編輯器】。
第三步:選中scrollable_content動態(tài)面板,繼續(xù)在右側(cè)部件【屬性】面板中單擊【更多事件>>>】,在下拉列表中選擇【向上拖動結(jié)束時】,在彈出的【用例編輯器】頂部單擊【添加條件】,在彈出的【條件編輯器】中,單擊左側(cè)的下拉列表并選擇【值】,見圖33-A。然后單擊【fx】,見圖33-B。在彈出的【編輯文本】對話框中單擊【添加局部變量】,在中間的下拉列表中選擇【部件】,右側(cè)下拉列表中選擇【圖像】,如圖34所示。繼續(xù)單擊【插入變量或函數(shù)…】,在下拉列表中選擇局部變量 LVAR1,并將其修改為[[LVAR1.y]],意思是【圖像部件的y坐標(biāo)】,見圖35。
(圖32)
(圖33)
(圖34)
(圖35)
單擊【確定】按鈕關(guān)閉【編輯文本】對話框,在【條件編輯器】中進行如圖36所示的設(shè)置,意思是“如果圖像的y坐標(biāo)小于-1022像素”,單擊【確定】按鈕關(guān)閉【條件編輯器】,現(xiàn)在條件編輯完畢,繼續(xù)在【用例編輯器】中新增【移動】動作。在右側(cè)【配置動作】中勾選【圖像】,設(shè)置其移動為【絕對】,坐標(biāo)(x:0,y:-1022),動畫【搖擺】,時間【200】毫秒,見圖37。
意思是,如果圖像部件的y坐標(biāo)小于-1022像素,就將其移動到絕對位置(0,-1022)。
(圖36)
(圖37)
第四步:同樣的原理,當(dāng)向下拖動時,如果圖像部件的y坐標(biāo)大于0,就移動圖像部件到絕對位置(0,0),如圖38。單擊【確定】按鈕關(guān)閉【用例編輯器】。
(圖38)
第五步:至此,使用條件約束的上下滑動交互就制作完畢了。在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
筆者點評: 在制作高保真原型時都會使用到這種方法,比如下拉刷新交互效果。其優(yōu)點是靈活、保真度高,但需要扎實的基礎(chǔ)知識。
推薦指數(shù):
當(dāng)前文章標(biāo)題:案例16:APP可滾動內(nèi)容的三種常用實現(xiàn)方法
當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3418.html
上一篇:滑動解鎖評論
下一篇:案例17:回到頂部交互效果