【Axure教程】如何通過中繼器快速制作列表并進(jìn)行刪除數(shù)據(jù)操作

0 評論 4768 瀏覽 14 收藏 6 分鐘

在使用Axure制作原型時(shí),元件庫中的“中繼器”,可以做很多東西,但我們卻不太會(huì)使用它繪制一些高保真的原型。作者總結(jié)了如何使用中繼器制作后臺(tái)列表并進(jìn)行刪除的操作方法,希望對你應(yīng)用中繼器有所幫助。

很多小伙伴們在使用Axure制作原型時(shí),經(jīng)常會(huì)看到元件庫中有一個(gè)元件【中繼器】,但是很多小伙伴不太會(huì)使用中繼器進(jìn)行繪制一些高保真的原型。本期,我將帶領(lǐng)大家學(xué)習(xí)如何使用中繼器制作后臺(tái)列表并進(jìn)行刪除的操作。

參考原型地址:https://zc9igp.axshare.com

話不多說,直接進(jìn)入主題。

1、在空白面板中拖入一個(gè)空白矩形,接著從左側(cè)元件庫中選擇【中繼器】元件。

2、選中【中繼器】,在右側(cè)【樣式】中設(shè)置對應(yīng)的字段名及數(shù)據(jù)內(nèi)容,如下圖所示(其中字段名及數(shù)據(jù)內(nèi)容均可根據(jù)實(shí)際需求進(jìn)行調(diào)整)

3、在【中繼器】內(nèi)部拖入【矩形】元件,將每個(gè)矩形分別命名設(shè)置如下樣式,使其【矩形】元件對應(yīng)中繼器中所設(shè)置的列名,其中第一個(gè)【矩形】和最后一個(gè)【矩形】可以不進(jìn)行命名(此處可以先進(jìn)行無腦模仿操作)。

4、選中【中繼器】,在左側(cè)交互中分別設(shè)置對應(yīng)的【矩形】名稱,其中操作【值】時(shí),選擇【Fx】–【插入變量或函數(shù)】,選擇【中繼器】中對應(yīng)的列名。

5、分別設(shè)置完成之后,我們再針對【設(shè)備編號】這個(gè)文本設(shè)置特殊一點(diǎn)的值,如下圖右側(cè)交互所示,TG_[[Item.id+1000]]表示在每一行id數(shù)字的前面加上TG_,在id后面加(+10000),此時(shí),列表中的設(shè)備編號則會(huì)生成如下圖【中繼器】的列展示。

6、接著我們對【中繼器】的列表上方拖拽【矩形】元件,編輯對應(yīng)的列名并進(jìn)行相應(yīng)的美化,其中,中繼器的行與行之間的交替可以參考下圖所。操作到目前,【中繼器】的第一步基礎(chǔ)數(shù)據(jù)才剛設(shè)置完成,接著我們再繼續(xù)往下看。

7、在【中繼器】的最后一個(gè)矩形框內(nèi)加入文本“修改”、“刪除“,對【刪除】設(shè)置交互狀態(tài)【單擊時(shí)–刪除行–當(dāng)前行】,此時(shí),我們的中繼器的直接刪除效果就完成了。

8、接著,如果我們想要做一個(gè)點(diǎn)擊【刪除】時(shí),做提醒彈窗,確認(rèn)是否刪除,我們先添加一個(gè)彈窗設(shè)置,如下圖。

9、接著我們對彈窗進(jìn)行隱藏設(shè)置,點(diǎn)擊【刪除】設(shè)置交互數(shù)據(jù)(由下圖右側(cè)數(shù)據(jù))。此時(shí),已經(jīng)點(diǎn)擊刪除已經(jīng)可以調(diào)出刪除彈窗了。

10、接著,我們再對彈窗上的【刪除】做交互,使其刪除【中繼器】中的行信息。

11、最后,我們對刪除彈窗上的【取消】做交互(如下圖右側(cè)數(shù)據(jù)),這樣一個(gè)中繼器的刪除流程就已經(jīng)完成了

12、希望以上的【中繼器】的【刪除】操作可以幫助到大家,如有疑問,可以在下方留言喲,我會(huì)第一時(shí)間為大家解答,下一期,我將帶大家學(xué)習(xí)如何在【中繼器】中【新增】一條新的數(shù)據(jù)。

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

題圖來自Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!