動(dòng)態(tài)面板的功能很強(qiáng)大，了解了動(dòng)態(tài)面板的原理，便可以運(yùn)用自如。在目前的工作中，我把經(jīng)常使用動(dòng)態(tài)面板制作的交互總結(jié)了一下，希望與大家討論并分享。

動(dòng)態(tài)面板在交互中常常用在：

• 使用動(dòng)態(tài)面板制作輪播圖。（http://www.codemsi.com/rp/692728.html）
• 使用動(dòng)態(tài)面板制作tab頁(yè)面切換。（http://www.codemsi.com/rp/694807.html）
• 使用動(dòng)態(tài)面板制作彈出對(duì)話框。
• 使用動(dòng)態(tài)面板……

為了好理解，我使用員工信息維護(hù)時(shí)禁用某員工作為例子。該例子中還涉及到全局變量的使用。

期望效果：

• 單擊禁用時(shí)候，彈出禁用原因選擇的對(duì)話框。
• 選擇原因提交后，彈框消失。
• 列表中的狀態(tài)變從“在職”變?yōu)椤敖谩?，操作中的按鈕“禁用”變?yōu)榘粹o“撤銷禁用”。（全局變量的使用）

制作步驟

制作一個(gè)列表，可用矩形來(lái)做。

在列表下方制作添加一個(gè)動(dòng)態(tài)面板，大小為希望顯示的彈框的大小。

為該動(dòng)態(tài)面板添加名稱：jinyong。

添加狀態(tài)State1的頁(yè)面內(nèi)容。

將動(dòng)態(tài)面板初始設(shè)為隱藏。

添加交互。

1）單擊“禁用”按鈕的時(shí)候彈出jinyong的動(dòng)態(tài)面板。

2）單擊對(duì)話框中的“提交”，隱藏jinyong的動(dòng)態(tài)面板。

3）單擊對(duì)話框中的“取消”，隱藏jinyong的動(dòng)態(tài)面板。（同2）“提交”的交互）

4）以下為使用變量的步驟。

添加一個(gè)全局變量A（以下為添加變量，運(yùn)用變量的步驟）

5）為以下2個(gè)矩形命名。

6）當(dāng)點(diǎn)擊“禁用”按鈕彈出“jinyong”動(dòng)態(tài)面板，點(diǎn)擊提交后，設(shè)置變量A=1，且重新刷新當(dāng)前頁(yè)面。

7）加載頁(yè)面時(shí)，設(shè)置條件：變量A=1，則列表中的狀態(tài)變從“在職”變?yōu)椤敖谩?，操作中的按鈕“禁用”變?yōu)榘粹o“撤銷禁用”，具體的交互如下圖設(shè)置。

運(yùn)行該文件，可看到實(shí)現(xiàn)效果。

具體可查看源文件：https://pan.baidu.com/s/1hs3P048

延伸：

制作彈出框，使用的是動(dòng)態(tài)面板的隱藏顯示功能，類似于制作彈出框，還可以制作

• 彈出日期的選擇。
• 制作下拉菜單。
• 制作展開收起。
• 制作規(guī)則說(shuō)明頁(yè)面。

大家可以試試。

作者：小羊駝，產(chǎn)品經(jīng)理一枚，10年+產(chǎn)品經(jīng)驗(yàn)。

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