中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

Axure中的Repeater控件顧名思義就是可以重復添加內(nèi)容，而無需逐個進行添加。該控件對于以九宮格類、列表類的形式內(nèi)容時非常有效，且支持用戶添加、修改、刪除控件中的內(nèi)容。

Repeater控件的使用步驟為：

定義元素–>添加數(shù)據(jù)–>綁定數(shù)據(jù)–>修改樣式–>數(shù)據(jù)操作

下面以添加列表類內(nèi)容為例，逐步具體介紹該控件的使用方法。本文僅適用于具有一定Axure使用經(jīng)驗的用戶閱讀。

1 定義Repeater元素

1) 在頁面中添加Repeater控件，添加后默認效果如下圖：

2) 雙擊編輯控件，并按下圖所示，為Repeater添加內(nèi)容，并為各個組件命名：

此時，返回到Home頁看到的效果如下（其中的數(shù)字1、2、3是默認值，暫時不用理會）：

2 為Repeater添加數(shù)據(jù)

從上圖可以看到Repeater的框架已經(jīng)顯示出來了，但里面的內(nèi)容還沒有，下面我們開始為中繼器添加內(nèi)容；

1) 打開中繼器編輯界面，點擊頁面下部的小三角，打開Repeater 屬性窗口，如下圖所示：

其中，Repeater Dataset就是中繼器中的數(shù)據(jù)，這里默認的1、2、3就是之前預覽界面中出現(xiàn)的數(shù)字。

2) 按照上一節(jié)對圖片、標簽的定義，為中繼器添加列值（列值最好與之前的定義一致）和數(shù)據(jù)，添加之后效果如下：

注意：由于頭像是圖片格式，但Axure并不支持輸入圖片路徑的方式，因此圖片需要在單元格中點擊右鍵選擇“導入圖片”，只有這樣圖片才能正常顯示。

3 綁定數(shù)據(jù)

Repeater的數(shù)據(jù)已經(jīng)添加完成了，但你會發(fā)現(xiàn)此時在Home頁預覽Repeater仍然沒有顯示我們添加的數(shù)據(jù)，下面將介紹如果將我們添加的數(shù)據(jù)綁定到Repeater中。

1) 在Repeater屬性窗口中，點擊“中繼器項目交互”，顯示默認內(nèi)容：

2) 修改ItemLoad用例的定義，修改參考下圖所示：

注意：頭像要選擇“設(shè)置圖像”動作，其他內(nèi)容選擇“設(shè)置文本”。這一步非常重要，如果設(shè)置不對，頭像將不顯示。

3) 此時，返回到Home頁預覽Repeater就可以看到上述步驟中添加的數(shù)據(jù)內(nèi)容了：

4 修改樣式

至此，Repeater中最重要的部分已經(jīng)定義完成，當然還可以對Repeater的樣式進行簡單調(diào)整，定義非常簡單，請自行研究。下圖為樣式定義，供參考：

效果圖如下：

5 數(shù)據(jù)操作

經(jīng)過上述章節(jié)的步驟，你已經(jīng)可以定義一個完整的Repeater控件，通過這種方式可以節(jié)省大量樣式重復控件的添加工作。不過，這些只是Repeater基本的使用方法，其更大的價值在于可以動態(tài)添加、修改、刪除數(shù)據(jù)。本章的內(nèi)容屬于Repeater進階用法，供有需要的讀者參考。當然，如果你的原型圖中并不需要動態(tài)增刪改數(shù)據(jù)的效果，那么有之前的知識也夠用。

5.1 添加數(shù)據(jù)

1) ?接上文的步驟，在Home頁放置一個按鈕，用于為Repeater添加數(shù)據(jù)：

2) 為該按鈕添加單擊效果，當點擊按鈕時為Repeater添加一行數(shù)據(jù)，如下圖：

注意：

A. 這里每次只能添加1行，如果定義了多行數(shù)據(jù)，則點擊按鈕時會一次性添加多行。

B. 每次點擊按鈕時添加的行數(shù)據(jù)是相同的，如果想要添加不一樣的數(shù)據(jù)，則需要配合其他的方法，此處不做說明。

3) 預覽Home頁，每點擊1次“添加行”按鈕就可以在Repeater中添加1行：

5.2 修改數(shù)據(jù)

1) 打開Repeater編輯界面，定義“修改”按鈕的點擊事件，實現(xiàn)點擊該按鈕修改該行description字段的功能，定義如下圖：

2) 預覽Home頁，點擊每行后面到“修改”按鈕即可以修改該行description字段的值：

5.3 刪除單行數(shù)據(jù)

1) 打開Repeater編輯界面，定義“刪除”按鈕的點擊事件，實現(xiàn)點擊該按鈕刪除該行的功能，定義如下圖：

2) 預覽Home頁，點擊每行后面到“刪除”按鈕即可以刪除該行數(shù)據(jù)。

5.4 刪除多行數(shù)據(jù)

如果需要選擇多行然后批量刪除，可以使用checkbox控件，并配合Mark Rows進行刪除，步驟如下。

1) Repeater中行首增加一個checkbox控件，并定義該控件的狀態(tài)改變事件，實現(xiàn)當選中checkbox時標記該行，取消選中時取消標記該行，定義如下圖：

2) 在Home頁中增加“刪除選中行”按鈕，并定義該按鈕的點擊事件，實現(xiàn)點擊該按鈕可以刪除checkbox被選中的行，定義如下圖：

3) 預覽Home頁，點擊“刪除選中行”按鈕即可以刪除多行數(shù)據(jù)。

作者：王春雷，互聯(lián)科技創(chuàng)始人。12年互聯(lián)網(wǎng)從業(yè)經(jīng)驗，5年產(chǎn)品設(shè)計經(jīng)驗。

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