如何判斷中繼器是否包含特定值?

0 評論 1010 瀏覽 2 收藏 7 分鐘

在中繼器的使用過程中,你知道該如何判斷中繼器是否包含特定值嗎?或許你可以使用監聽器,在不刷新中繼器的前提下,分別判斷每一行的值。本篇文章里,作者便做了分析總結,一起來看。

前言

在電子商務應用類原型中,將商品添加到購物車時,應該先檢查該商品是否已經存在于購物車中,如果已經存在,則增加商品數量,否則添加新商品。

一、基礎知識

你對中繼器監聽器了解多少?如果不明白監聽器是什么東西,可以先閱讀一下《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 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!