Axure|一次性搞定中繼器【附Firefox瀏覽器圖片加載失敗解決辦法】

這一篇文集名爲《Axure進階之路》自然少不了Axure的難點之一中繼器。中繼器(repeat)應該算是Axure的三大難點動態面板,函數,中繼器中最難的。網上能搜索不少關於中級器的文章,在下狗尾續貂,希望能爲大家帶來一些新思路。

不想看內容的朋友可以直接跳至文尾下載鏈接,順便幫忙點個贊

 

一、中繼器的用法

看教程之前,先認清一個事實:中繼器不難。中繼器不難。中繼器不難。

還有一個事實:中繼器雖然不常用,但是很有用,真的很有用。

中繼器是漢譯之後的稱呼,英文原指repeat,就是重複。可以理解爲連續重複的項。比如:

淘寶商品列表

類似於這樣的列表頁,每一項擁有相同的元素。例如圖中的商品圖片(img),商品名稱(name),商品價格(price)等等。有這樣連續重複的項,中繼器正好有了用武之地。

中繼器還有什麼用?

這是中繼器的數據集:

數據集

這是mysql數據庫表:

mysql數據庫結構

看出來了嗎?中繼器的數據集和mysql數據庫都是數據表結構,字段和記錄。

相信我,哪些告訴你中繼器沒用的要麼自己會不想讓你學,要麼自己根本也不懂。

可以這麼說:動態面板是鍛鍊產品經理在用戶交互設計上的能力,函數是鍛鍊產品經理在業務邏輯和判定實現上的能力,而中繼器是鍛鍊產品經理在數據歸納上的能力。

同意了我的觀點,請繼續往看下文。

二、建表

本次的示例就是一個商城的商品列表頁。程序員在開始項目之前會仔細看產品寫的需求文檔,然後梳理一下業務邏輯,抽象成代碼。其中有一部分就是建庫建表。今天我也帶大家來建建表。

建表其實就是根據頁面元素來填寫每一列的表頭。

拖入一箇中繼器——》雙擊進入——》把小框框刪除掉,改爲下圖樣式。這就是每一項重複的樣式

item

由上可知,該表涉及四個元素:商品圖片(img),商品名稱(name),商品價格(sprice),商品銷量(sell)。記得給每一項元素命名並且最好和數據集的字段相同。

一次命名

也就是四個字段。所以建表如下:

中繼器數據級

小技巧:建表時可以用excel表格建表,然後直接複製進去。以爲axure8.0的中繼器數據集的位置讓人很蛋疼。

三、顯示數據

建表之後,將數據顯示到對應的元素上,需要添加用例,(每項加載時)設置文本於

例如商品價格:

設置商品價格

選擇右下角——富文本——編輯:

選擇右邊“插入變量和函數”——》Item.price。(富文本就是可以添加格式的文本,我在此處加入了¥符號,就是讓其添加數據時在每一個金額前加上¥,這個也可以加在數據庫中或頁面元素上,個人覺得我這樣最簡單)

一次添加好商品名稱和商品銷售數量。

添加圖片和添加文本的方式稍有不同:

需要選擇設置圖片,修改默認爲值,點擊fx,設置其值爲Item.img。

設置圖片

每一列代表顯示界面的一項,可以比較一下顯示界面和數據集:(圖文來自網絡)              

                                                              

                                                                                   顯示界面      



作者:艾賓浩斯ace
鏈接:https://www.jianshu.com/p/cc7a227e4c14
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯繫作者獲得授權並註明出處。

 

——————————————————親測可用——————————————————————————

一。整個過程中,有個Bug,就是firefox圖片加載不出來問題????

*****解決辦法:

一定要在中繼器的數據集裏面添加img url。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章