近一段時(shí)間以來(lái)工作的重心開(kāi)始轉(zhuǎn)向產(chǎn)品方向，也學(xué)習(xí)了一些入門的Axure技術(shù)托享。今天自己動(dòng)手用動(dòng)態(tài)面版做了一個(gè)滾動(dòng)頁(yè)面骚烧，正好以此為契機(jī)寫下我在簡(jiǎn)書的第一篇文章，希望開(kāi)始紀(jì)錄一下我的產(chǎn)品進(jìn)階過(guò)程闰围。廢話就不多說(shuō)了赃绊，直接進(jìn)入實(shí)操。
1羡榴、在Axure中添加兩個(gè)方框碧查、一個(gè)動(dòng)態(tài)面板分別命名為“頂部菜單”、“底部菜單”校仑、“內(nèi)容”忠售。這個(gè)名為“內(nèi)容”的動(dòng)態(tài)面板就是我們接下來(lái)要操作的可拖動(dòng)頁(yè)面。具體界面如下圖
2迄沫、接著雙擊“內(nèi)容”動(dòng)態(tài)面板彈出“面板狀態(tài)管理”稻扬，選中“State1”確定進(jìn)入面板編輯頁(yè)面：
3、然后我們?cè)凇皟?nèi)容”面板的“State1”里面添加一個(gè)叫“拖動(dòng)面板”的動(dòng)態(tài)面板邢滑。說(shuō)直白點(diǎn)就是一個(gè)動(dòng)態(tài)面板嵌套另一個(gè)動(dòng)態(tài)面板腐螟。用操作“內(nèi)容”動(dòng)態(tài)面板的方法給“拖動(dòng)面板”的其中一個(gè)狀態(tài)添加需要顯示卻又超出界面的長(zhǎng)內(nèi)容，在這里我用方框隨便擺了個(gè)版面困后，最終得到的效果：
這時(shí)候我們回到最開(kāi)始的頁(yè)面乐纸，看到的效果是這樣的：
4、選中“內(nèi)容”動(dòng)態(tài)面板摇予，給他添加交互：拖動(dòng)時(shí)汽绢。給用例添加動(dòng)作“移動(dòng)”，配置動(dòng)作選擇“拖動(dòng)面板”侧戴，在配置動(dòng)作的下方移動(dòng)選項(xiàng)選擇“垂直拖動(dòng)”宁昭，最后確定保存設(shè)置。點(diǎn)擊預(yù)覽已經(jīng)可以拖動(dòng)內(nèi)容上下移動(dòng)酗宋。
5积仗、接著我們繼續(xù)完善拖動(dòng)的功能，當(dāng)上下拖動(dòng)時(shí)如果“內(nèi)容”面板不能拖離“頂部菜單”或“頂部菜單”蜕猫，應(yīng)該是挨在一起的寂曹，如果拖遠(yuǎn)了，當(dāng)鼠標(biāo)松開(kāi)時(shí)應(yīng)該彈回至“頂部菜單”或“頂部菜單”的邊上回右。我們給“內(nèi)容”添加“拖動(dòng)結(jié)束時(shí)”的交互隆圆，打開(kāi)用例編輯，點(diǎn)擊“編輯條件”
條件按下圖這樣選：遠(yuǎn)件范圍 拖動(dòng)面板 未接觸 元件范圍 頂部菜單翔烁。這些中文已經(jīng)很明顯渺氧，當(dāng)“拖動(dòng)面板”沒(méi)有接觸“頂部菜單”時(shí)觸發(fā)下一個(gè)動(dòng)作。
返回用例編輯蹬屹，添加動(dòng)作“移動(dòng)”
配置動(dòng)作選擇“拖動(dòng)面板”侣背，移動(dòng)選擇“到達(dá)”，x坐標(biāo)與y坐標(biāo)都設(shè)為0哩治。動(dòng)畫選擇“線性”秃踩，時(shí)間這里設(shè)為200毫秒。確定保存业筏。這時(shí)返回主界面點(diǎn)擊預(yù)覽我們已經(jīng)可以看到往下拖動(dòng)時(shí)如果內(nèi)容已經(jīng)見(jiàn)頂憔杨，都會(huì)自動(dòng)彈回到“頂部菜單”位置。
附上RP文件：
鏈接：http://pan.baidu.com/s/1mic2lwG 密碼：p3qe
