Axure7.0教程(四)中繼器的使用(4)

1 評論 19849 瀏覽 45 收藏 4 分鐘

Axure rp7.0的新元件中繼器(repeater)的功能中我們分別講解了增、刪、改三個(gè)功能,今天我們來講一下剩下的功能:

1、 按輸入的文字篩選;

2、 按指定條件(某一列)排序;

3、 翻頁功能。

本教程示例:axure7.0教程_小樓作品(四)中繼器的使用(4)

在學(xué)習(xí)本教程之前,請先閱讀《關(guān)于Axure rp7.0漢化包導(dǎo)致中繼器無法正常使用的bug說明》。當(dāng)然,如果在你閱讀這篇教程時(shí),上面提到的bug以解決的話,那么就請繼續(xù)往下看。

首先,我們先做一下準(zhǔn)備:

1、 在中繼器項(xiàng)目中添加多條數(shù)據(jù),以便更方便演示效果;

2、 添加一個(gè)文本框,設(shè)置好標(biāo)簽,用來輸入篩選條件,并添加一個(gè)按鈕用來觸發(fā)篩選事件;

3、 添加一個(gè)矩形或按鈕,轉(zhuǎn)換成兩個(gè)狀態(tài),用來觸發(fā)升序和降序事件的觸發(fā)。

一、篩選功能

準(zhǔn)備完畢后,我們先添加篩選事件,如下圖:

我們在篩選按鈕的onclick事件中添加一個(gè)用例,在這用例里面添加事件“新增過濾器”(Add filter),然后勾選過濾器,自定義一個(gè)名稱,在查詢里面讓item.XXX==局部變量。

說明:

1、 變量列表里面選擇或者直接輸入item.xxx;

2、 自定義局部變量=篩選條件輸入文本框的元件文字;

3、 這里注意是兩個(gè)“=”。一個(gè)的話是給變量賦值,兩個(gè)話是判斷是否一樣。

這樣根據(jù)輸入文字進(jìn)行篩選的功能就實(shí)現(xiàn)了。

二、排序功能

1、在動(dòng)態(tài)面板中的第一個(gè)狀態(tài)的按鈕上,添加事件:

(1)添加一個(gè)Add Sort–勾選中繼器–設(shè)置一個(gè)排序的自定義名稱—設(shè)置排序項(xiàng)目—設(shè)置按數(shù)字排序—設(shè)置按降序排列“Decending”(價(jià)格由高到低)。

(2)設(shè)置動(dòng)態(tài)面板狀態(tài)轉(zhuǎn)換為第二個(gè)狀態(tài)。

2、在動(dòng)態(tài)面板的第二個(gè)狀態(tài)的按鈕上,添加事件:

(1)參照上一步驟,最后一步設(shè)置為按升序排列“Ascending”(價(jià)格由低到高)。

(2)設(shè)置動(dòng)態(tài)面板狀態(tài)轉(zhuǎn)換為第二個(gè)狀態(tài)。

說明:在最后一步設(shè)置中還有一個(gè)選項(xiàng)“Toggle”,是升序與降序切換。

4-2

到這里,按價(jià)格排序的功能也實(shí)現(xiàn)了。

三、翻頁功能

這個(gè)最簡單,我們只需要添加兩個(gè)按鈕,分別是前一頁和后一頁,并在兩個(gè)按鈕的onclick事件上分別設(shè)置:

前一頁:添加Set Current Page,勾選中繼器,在Select the page中選擇“Previous”;

下一頁:添加Set Current Page,勾選中繼器,在Select the page中選擇“Next”;

說明:在Select the page選項(xiàng)中還有兩個(gè)選項(xiàng),分別是Value(根據(jù)值打開指定頁)和Last(最后頁)。

4-3

好了,翻頁功能也完成了。

下面就是見證奇跡的時(shí)刻!你做到了嗎?

作者:小樓

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 有沒好點(diǎn)的教程,這寫的真垃圾

    來自湖南 回復(fù)