無論做web段還是移動端，常常會用到動態(tài)面板固定在某個區(qū)域來變換內(nèi)容，達(dá)到節(jié)省空間的作用，今天分享的就是如何實(shí)現(xiàn)這種方式。

預(yù)覽效果：

一、元件準(zhǔn)備

以IT/互聯(lián)網(wǎng)、設(shè)計創(chuàng)作、職場金融這三組為例，所涉及到的元件分別為it1（小豎條矩形）、it（標(biāo)識”IT/互聯(lián)網(wǎng)”矩形）、 design1（小豎條矩形）、design（標(biāo)識“設(shè)計創(chuàng)作”矩形）、 finance1（小豎條矩形）、finance（標(biāo)識“職場/金融”矩形）以及最后的動態(tài)面板neirong（分為三組，名稱分別對應(yīng)it、design、finance）。

注：小豎條矩形默認(rèn)顏色是灰色的，這里填充顏色只是為了看清楚。

二、添加事件

1，將三個小豎條矩形設(shè)置選項(xiàng)組，名稱為“標(biāo)記”，并且分別添加選中事件：填充顏色 #2CC27B。

2，將三個矩形設(shè)置選項(xiàng)組，名稱為“課程”，并且分別添加選中事件：填充顏色 白色。

釋：這里設(shè)置選項(xiàng)組的目的是為了當(dāng)點(diǎn)擊其中一個為選中時，其他兩個就會變?yōu)椴贿x中。

3，鼠標(biāo)單擊 “it（IT/互聯(lián)網(wǎng)）” 設(shè)置動態(tài)面板neirong ，選擇狀態(tài) Value，狀態(tài)名稱 [[this.name]]；

選中 it1和it。

將it的鼠標(biāo)單擊事件復(fù)制然后粘貼到“desgin（藝術(shù)設(shè)計）”、finance（職業(yè)/金融），且分別將選中對應(yīng)改為 design1和design、finance1和finance。

4，針對上下拖動動態(tài)面板而不超出框架這一實(shí)現(xiàn)方式可以參考上一期的?Axure8.0｜移動端上下滑動不出屏??。

三、效果

具體效果請點(diǎn)擊右側(cè)網(wǎng)址?http://67r9k4.axshare.com/#g=1&p=index?。

作者：樂悠悠，QQ：714226583，產(chǎn)品新人，目前在找工作。

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