編輯導(dǎo)讀：動(dòng)態(tài)面板是產(chǎn)品的基本功能之一，應(yīng)用也非常廣泛。本文作者分享了如何用Axure，制作動(dòng)態(tài)面板左右滑動(dòng)及展開收起，希望對(duì)你有幫助。

動(dòng)態(tài)面板在Axure原型設(shè)計(jì)中，可以說是應(yīng)用最廣泛的了。本次課程我們學(xué)習(xí)用動(dòng)態(tài)面板制作左右滑動(dòng)及展開收起效果。

預(yù)覽及下載地址：https://f6tdt2.axshare.com

一、制作拖動(dòng)效果

第一步：創(chuàng)建動(dòng)態(tài)面板

創(chuàng)建動(dòng)態(tài)面板命名為“日期“

創(chuàng)建兩個(gè)面板，其分別命名為：部分日期和全部日期

點(diǎn)擊“部分日期”進(jìn)入創(chuàng)建“水平拖動(dòng)”動(dòng)態(tài)面板，制作面板內(nèi)容

第二步：添加交互

選擇”水平拖動(dòng)“動(dòng)態(tài)面板，觸發(fā)”拖動(dòng)時(shí)事件“，

左右拖動(dòng)效果完成，接下來是展開收起功能

二、制作展開收起效果

第一步：創(chuàng)作動(dòng)態(tài)面

點(diǎn)擊“全部日期”面板，制作面板內(nèi)容

第二步：添加交互

選擇“查看全部”按鈕，觸發(fā)“鼠標(biāo)點(diǎn)擊時(shí)”事件，設(shè)置動(dòng)態(tài)面板“日期”為“全部日期”，顯示“日期”動(dòng)態(tài)面板

點(diǎn)擊雙箭頭圖標(biāo)，觸發(fā)“鼠標(biāo)點(diǎn)擊時(shí)”事件，設(shè)置動(dòng)態(tài)面板“日期”為“部分日期”，顯示“日期”動(dòng)態(tài)面板。

兩個(gè)效果完成。

本文由@qianqianlu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pixabay，基于CC0協(xié)議