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

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

gif圖演示：

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

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

思路：

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

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

實(shí)現(xiàn)步驟

1. 準(zhǔn)備兩個中繼器

（1）第一個中繼器：商品列表中繼器結(jié)構(gòu)

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

這里重點(diǎn)說兩點(diǎn)：

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

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

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

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

操作過程如下：

重點(diǎn)二：shuliang列表項(xiàng)

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

第二個中繼器：購物車列表中繼器結(jié)構(gòu)

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

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

2. 添加交互

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

Case1：

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

更新行的交互截圖：

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

Case2：

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

截圖如下：

兩個中繼器之間的數(shù)據(jù)對應(yīng)各個列，分別綁定，尤其是shuliang列，兩個中繼器中的shuliang列數(shù)據(jù)一致。即點(diǎn)擊一次購物車圖標(biāo)時，商品列表中繼器中的shuliang為1，購物車中繼器中的shuliang也是1。因?yàn)橘徫镘囍欣^器的“購買數(shù)量文本框”shuliang在每項(xiàng)加載中和數(shù)據(jù)集的shuliang列綁定，所以此時該文本框顯示為1。

Case3

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

截圖如下：

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

更新列：shuliang

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

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

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