無論做web段還是移動端，常常會用到動態面板固定在某個區域來變換內容，達到節省空間的作用，今天分享的就是如何實現這種方式。

預覽效果：

一、元件準備

以IT/互聯網、設計創作、職場金融這三組為例，所涉及到的元件分別為it1（小豎條矩形）、it（標識”IT/互聯網”矩形）、 design1（小豎條矩形）、design（標識“設計創作”矩形）、 finance1（小豎條矩形）、finance（標識“職場/金融”矩形）以及最后的動態面板neirong（分為三組，名稱分別對應it、design、finance）。

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

二、添加事件

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

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

釋：這里設置選項組的目的是為了當點擊其中一個為選中時，其他兩個就會變為不選中。

3，鼠標單擊 “it（IT/互聯網）” 設置動態面板neirong ，選擇狀態 Value，狀態名稱 [[this.name]]；

選中 it1和it。

將it的鼠標單擊事件復制然后粘貼到“desgin（藝術設計）”、finance（職業/金融），且分別將選中對應改為 design1和design、finance1和finance。

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

三、效果

具體效果請點擊右側網址?http://67r9k4.axshare.com/#g=1&p=index?。

作者：樂悠悠，QQ：714226583，產品新人，目前在找工作。

本文由 @樂悠悠 原創發布于人人都是產品經理。未經許可，禁止轉載。