上下滾動(dòng)切換是APP中常見的交互之一疆偿，通過動(dòng)態(tài)的交互，能夠更好的引導(dǎo)用戶的視覺庶近。
上下滾動(dòng)切換.gif
準(zhǔn)備
- Axure 8（或Axure 9）軟件已安裝翁脆。
- 掌握基本的軟件使用。
本教程知識(shí)點(diǎn)
- 初級(jí)的動(dòng)態(tài)面板使用鼻种。
- 矩形反番、文字元件。
詳細(xì)教程--上下滾動(dòng)切換
功能
- 界面加載后叉钥，內(nèi)容進(jìn)行上下滾動(dòng)交互切換罢缸。
制作方式
本文以搜索欄提示的上下滾動(dòng)為示例。做兩種狀態(tài)的切換投队。
1枫疆、制作基礎(chǔ)切換內(nèi)容（本質(zhì)為動(dòng)態(tài)面板）。創(chuàng)建兩個(gè)動(dòng)態(tài)面板狀態(tài)敷鸦。
2息楔、制作填充動(dòng)態(tài)面板狀態(tài)內(nèi)容。
- 制作輔助樣式扒披。若需要交互值依，使用鼠標(biāo)單擊事件。
3碟案、制作上下滾動(dòng)內(nèi)容愿险。
- 新建動(dòng)態(tài)面板。
- 動(dòng)態(tài)面板內(nèi)容填充為文字价说，編輯文案辆亏。
- 復(fù)制動(dòng)態(tài)面板狀態(tài)，修改復(fù)制后的文案鳖目。
設(shè)置交互事件：頁面載入時(shí)
設(shè)置動(dòng)態(tài)面板向后循環(huán)扮叨。
設(shè)置間隔3000（1s==1000）。
設(shè)置進(jìn)入领迈、退出動(dòng)畫為向上滑動(dòng)甫匹，時(shí)間500（這樣就能實(shí)現(xiàn)向上切換的效果）甸鸟。
總結(jié)
- 動(dòng)態(tài)面板其實(shí)可以實(shí)現(xiàn)比較多的簡(jiǎn)單交互。主要通過動(dòng)畫的設(shè)置兵迅。
- 上下滑動(dòng)切換其實(shí)使用場(chǎng)景相對(duì)較多，例如案例的搜索欄薪贫、部分滾動(dòng)的資訊等等恍箭。
- 可以制作一定規(guī)范的小交互封裝成元件庫，比如此次我采用的就是375寬的制作瞧省，下次復(fù)用直接復(fù)制至對(duì)應(yīng)手機(jī)原型的位置即可扯夭。只需配置頁面載入交互和文案。
鏈接地址
案例下載地址：https://www.fuzuobiao.com/proview/5f15c17c1fcc636bd02816a6
案例預(yù)覽地址：http://demo.fuzuobiao.com/fzb/5f15c17c1fcc636bd02816a6/start.html
負(fù)坐標(biāo)網(wǎng)出品鞍匾。
負(fù)坐標(biāo)網(wǎng)是一個(gè)擁有高質(zhì)量原型模版交洗、組件庫的交易平臺(tái)。
網(wǎng)址：www.fuzuobiao.com
