怎么利用中繼器和動態(tài)面板制作一個可以自動化菜單?
發(fā)布時間:2022-03-12 10:42 [ 我要自學網原創(chuàng) ] 發(fā)布人: 小劉2175

準備事項

1.建好頁面,備用

2. 拖1個中繼器到畫布里,選中中繼器,然后在樣式-數據里,編輯好一級菜單;一級菜單只做二級菜單的展開收起用,所有直接錄入菜單名字就行。二級菜單,對應的列,選擇單元格,然后右鍵引入頁面,選擇要打開的頁面就行

第 1 步 設置二級菜單+交互事件

1.1 雙擊中繼器,進入中繼器里面,選中矩形,給矩形命名:一級菜單

1.2 再拖1個新的矩形進入中繼器,命名:二級菜單1,設置單擊事件,選擇單擊時打開鏈接(如果需要的話,你可以設置成在內聯框架中打開鏈接,我就是設置的內聯框架中打開,此處請根據個人喜好酌情設置事件類型)。這個時候不用選打開哪個頁面,后面用函數設置?聪聢D,選擇【鏈接到URL或文件路徑】

1.3 設置打開當前菜單名稱對應的頁面
選擇函數fx,按下圖操作選擇元件函數中繼器里的函數變量,我的中繼器數據排列方式是從左往右,一級菜單,二級菜單1、二級菜單2…這樣排列的,所以二級菜單的第一個菜單就選擇第二列的表頭變量名字那個就行。解釋一下,這個事件設置的意思,是希望在單擊時打開菜單文本對應的頁面,也就是說,你的菜單顯示的是二級菜單,點擊時就會自動打開二級菜單這個頁面。

1.4 接下來,再設置一個載入時事件,載入時,隱藏當前元件。然后啟用情形,添加一個判斷條件,條件設置成下圖所示即可。這里是要解決中繼器的一個體驗問題。因為實際情況中,二級菜單的數量不一定是相同的。但是中繼器有一個毛病,它只按行數展示數據,不管你列里面有沒有內容,只要有行,即使是空的也會展示,所以就會出現很多紅白列的情況。此處對應的二級菜單少的地方,會展示空白的二級菜單。所以這一步的操作,是要隱藏這些空白菜單

按照以上步驟設置完,這個按鈕就可以打開對應的頁面了。

1.5 設置完以上事件,按照你需要的二級菜單數量,進行復制粘貼。注意,要按照二級菜單數量的上線復制粘貼。粘貼完記得改一下矩形名字。

1.6 復制粘貼完后,選擇所有的二級菜單,設置成動態(tài)面板,給動態(tài)面板命名,然后隱藏動態(tài)面板。選擇一級菜單,建一個單擊事件,單擊是切換二級菜單的動態(tài)面板的可見性,效果選擇推動和拉動元件。這個菜單不會的,自行百度一下二級菜單怎么做。

第 2 步 數據綁定

2.1.數據綁定,將中繼器里的菜單內容,跟一級菜單、二級菜單設置綁定管理。選中中繼器(直接新建頁面載入時事件也行),新建交互事件,選擇載入時事件,載入時設置文本,找到矩形,一級菜單,選擇一級菜單后設置文本內容,在文本【值】的下方刪掉原來的文本,點擊右側的函數【fx】,設置動態(tài)的菜單名字。添加函數的方法跟上面的一樣,就不啰嗦了,不會的,往上翻找找,或者自己找一個中繼器的教程看看怎么綁定數據。這個時候,去看看你中繼器的數據表格里,一級菜單對應的是哪一列,在函數選擇是,選對應的表頭那列就行。

第 3 步 新增菜單怎么辦?

3.1 新增菜單的話,二級菜單數量不增多的情況下,直接在中繼器的數據里添加對應的菜單就行。如果二級菜單的數量要新增,按上面的步驟,多復制粘貼幾個二級菜單,設置載入事件綁定好數據,就可以了
剩下的,大家可以自行發(fā)揮了

UI交互app及axure設計教程
我要自學網商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。
V
特惠充值
聯系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網頁設計 會計課程 興趣成長 AIGC