如何判斷中繼器是否包含特定值?
在中繼器的使用過程中,你知道該如何判斷中繼器是否包含特定值嗎?或許你可以使用監聽器,在不刷新中繼器的前提下,分別判斷每一行的值。本篇文章里,作者便做了分析總結,一起來看。
前言
在電子商務應用類原型中,將商品添加到購物車時,應該先檢查該商品是否已經存在于購物車中,如果已經存在,則增加商品數量,否則添加新商品。
一、基礎知識
你對中繼器監聽器了解多少?如果不明白監聽器是什么東西,可以先閱讀一下《Axure監聽之中繼器監聽》這篇文章。最好能夠清楚為什么要用監聽器、什么時候用、以及怎么用。
?。?!這個知識點是中繼器進階應用的基礎,很多以往非常難以實現的交互通過監聽器都可輕松實現。
二、簡單教程
做一個簡單一點的,只判斷有無,請準備以下幾個元件:
一個文本框,用來輸入值。
一個文本標簽,用來顯示反饋信息。
本教程為了直觀,一物多用,兼記錄中繼器是否包含文本框的值(可改為全局變量)。
一個按鈕(起名:添加),用來進行添加操作。
一個中繼器(起名:購物車),內部放兩個元件:
- 把默認的列名[[Item.Column0]]改為[[Item.Name]]
- 默認的矩形,用來顯示中繼器的內容。
- 一個隱藏的熱區,用來做監聽器(起名:監聽器)。
先綁定監聽的交互,添加(熱區)監聽器的“旋轉時”,判斷如果內部[[Item.Name]]列的值等于文件框的值,就把文本標簽的值修改成true。
再在“添加按鈕”上新建“單擊時”交互,內容是判斷文件框是否有內容,如果有內容就先把標簽的值改為false,然后觸發監聽器熱區的“旋轉時”,最后觸發當前組件的“旋轉時”進行下一步操作。
繼續添加“旋轉時”的交互為先判斷文件標簽的內容是false才添加,否則就在文本標簽里給出提示信息。
上面出現的局部變量[[textField]]就是文本框元件的文本。
完事兒啦,就這么簡單。趕快預覽看下吧!
三、進階教程
如果我們是要做一個功能相對完善的購物車原型,那上面講的就過于簡單了。通常,我們除了購物車中繼器外,還應該有一個商品列表中繼器。而且同一個商品可能會添加多次,但是基本原理是相通的,都是要通過監聽先判斷要添加的值在中繼器里是否已存在,無非就是商品已存在時時行數量增加,商品在購物車里不存在時再進行添加。兩個中繼器間通過一個外部的文本框進行交流。
準備以下元件:
一個文本框。
一個文本標簽。
一個商品列表中繼器(起名:商品列表)
- 把默認的列名[[Item.Column0]]改為[[Item.Name]]
- 默認的矩形,用來顯示中繼器的內容。
- 一個文本框(起名:數量),類型改為“Number”,用來記錄需加入購物車的商品數量。
- 一個添加按鈕(起名:“添加”)。
一個購物車中繼器(起名:購物車)
- 把默認的列名[[Item.Column0]]改為[[Item.Name]]
- “購物車”中繼器加一個[[Item.Quantity]]列,代表商品數量。
- 默認的矩形,用來顯示商品名稱和數量。
- 一個隱藏的熱區,用來做監聽器(起名:監聽器)。
還是先把監聽上綁在熱區的“旋轉時”交互上,判斷[[Item.Name]]列值如果與文本框內的文本相同,就把文本標簽改為true。
“添加按鈕”的交互有一點點小變動,直接設置文本再觸發監聽器:
如果購物車里沒有當前商品,添加行,記得把“數量”元件里的數值一起保存。
如果購物車存在當前商品,那么更新商品數量:
這樣,進階的購物車也完成了,看下效果:
一個完整的購物車功能可能還包含單價、總價、運費、稅費、折扣等等屬性,有時間再補充。
總結
判斷目標中繼器是否包含特定值,可以使用監聽器在不刷新中繼器的前提下分別判斷每一行的值。
本文由 @Jorkin 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!