Axure8.0|動態面板內容簡單切換技巧

6 評論 43323 瀏覽 73 收藏 3 分鐘

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

預覽效果:

kk 2016-11_clip

一、元件準備

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

3Z]P$257RW_F92{QT[]A3}7

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

二、添加事件

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

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

QBBDL6DVV)VW`COQFKA${IW

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

3,鼠標單擊 “it(IT/互聯網)” 設置動態面板neirong ,選擇狀態 Value,狀態名稱 [[this.name]];

選中 it1和it。

TLVROU~FH8[KBQF)DVL{SPG

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

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

三、效果

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

 

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不知道為啥,你寫的,我都看不懂,明明有更簡單的方式,你每次非用什么函數,上次那篇也看不懂,哪個老師教你的

    來自北京 回復
    1. 什么簡單的辦法啊,求教

      來自北京 回復
  2. :mrgreen:

    來自北京 回復
  3. 狀態名稱或序號用[[this.name]],有什么特殊含義嗎,還是隨便取的,小白求指導

    來自浙江 回復
    1. 這個是函數,如果是當前元件直接默認的就是this.name 如果是其他元件需要加元件只帶 如元件time 指代成t 然后名稱就是t.name

      來自北京 回復
    2. 謝謝 ??

      來自浙江 回復