本文適合已經掌握axure元件屬性，中繼器屬性、中繼器制作、中繼器元件與數(shù)據(jù)集關系的同學參考。

最近自己在做中糧我買網的高保真原型，截取了一段購物車中的場景——同一商品，在重復點擊購物車圖標時，在購物車頁面，只做實時數(shù)量變化，而不會重復添加條目。

gif圖演示：

為了效果的直觀性，gif圖將“商品列表”（左側）和“購物車界面”（右側）放在同一平面上，讓大家看到變化。

為了文章簡化，僅講解“購物清單，重復添加同一商品，實時數(shù)量變化”這一部分的實現(xiàn)方法。

思路：

當在產品列表頁，看到商品時，第一次點擊購物車圖標，在購物車頁面中添加一行數(shù)據(jù)，顯示所選購的商品。

當重復點擊同一商品的購物車標志時，在購物車頁面，要更新該商品行的數(shù)據(jù)，更新數(shù)量文本的數(shù)字，不會重復添加條目。

實現(xiàn)步驟

1. 準備兩個中繼器

（1）第一個中繼器：商品列表中繼器結構

中繼器數(shù)據(jù)載入時元件及數(shù)據(jù)項目綁定如下：

這里重點說兩點：

重點一：商品圖片在img列中的表現(xiàn)方式

常規(guī)做法是，在img列中右鍵選擇“導入圖片”，然后選擇圖片，插入圖片。

這種做法的問題是，圖片無法在兩個元件之間傳遞，比如：在點擊購物車圖標時，在“購物車頁面中繼器中”顯示該商品的圖片，用“添加行”命令時，即便設置“購物車頁面中繼器”中的img==“商品列表中繼器”中的img，但是在實際生成時，并不能看到對應圖片。

技巧：先將所需的圖片都統(tǒng)一放在一個頁面中，然后生成預覽一下，在瀏覽器中（谷歌、360均可）右鍵選擇復制圖片地址，然后將該地址粘貼在img列表項中即可。這樣，在兩個中繼器中傳遞圖片就可以了。

操作過程如下：

重點二：shuliang列表項

在中繼器的數(shù)據(jù)表中，有shuliang一項，這一項在視圖中不做加載，即不和任何元件關聯(lián)，只是作為判斷項存在。初始數(shù)據(jù)為0，是為了日后分辨點擊購物車列表的行為的，第一次點擊，該數(shù)值為1，兩次點擊即為2，以此類推（實現(xiàn)辦法下文有介紹）。

第二個中繼器：購物車列表中繼器結構

中繼器數(shù)據(jù)載入時元件及數(shù)據(jù)項目綁定如下：

重點：“購買數(shù)量”的那個文本框，截圖中為“shuliang”，加載時要綁定item.shuliang列。

2. 添加交互

在第一個商品列表中繼器（截圖中名字為goods list）里的購物車圖標中，添加交互。

Case1：

（if true）即無條件的，首要執(zhí)行的動作，接下來更新本行數(shù)據(jù)。

更新行的交互截圖：

解釋：在點擊購物車圖標時，首先要更新本行數(shù)據(jù)（商品列表中繼器）的shuliang列，更新為[[Item.shuliang+1]]，即每點擊一次購物車圖標，shuliang列就+1。

Case2：

（if “[[Item.shuliang]]” == “1”）即如果shuliang列為1，即只點擊了購物車圖標一次。接下來為購物車中繼器（截圖中為名字為shopping）“添加行”。

截圖如下：

兩個中繼器之間的數(shù)據(jù)對應各個列，分別綁定，尤其是shuliang列，兩個中繼器中的shuliang列數(shù)據(jù)一致。即點擊一次購物車圖標時，商品列表中繼器中的shuliang為1，購物車中繼器中的shuliang也是1。因為購物車中繼器的“購買數(shù)量文本框”shuliang在每項加載中和數(shù)據(jù)集的shuliang列綁定，所以此時該文本框顯示為1。

Case3

（Else if “[[Item.shuliang]]” > “1”即多次點擊了購物車圖標。接下來為購物車中繼器（截圖中為名字為shopping）“更新行”。

截圖如下：

更新行條件：[[Item.name==TargetItem.name]] 即找到已經添加過的商品條目

更新列：shuliang

更新為：item.shuliang即找到已經添加過的商品條目，僅更新shuliang列數(shù)量，因該列給購買數(shù)量文本框（shuliang）賦值，所以在演示時，就能看到數(shù)量文本框不斷增加數(shù)量。

本文由 @bobowang 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議