本文詳細講解：利用Axure中繼器實現商品數量的增減，以及商品價格的總計的操作流程。

一般在做購物車、預算表中都會涉及到商品數量的增減，與商品價格的合計。

那么，我們怎么通過中繼器來實現這個效果呢？本文將詳細講解此類設計的交互用例。

首先看下效果：

一、簡要設計思路：

1. 點擊增加按鈕
2. 數量增加1
3. 總計金額相對應增加商品單價

同理，

1. 點擊減少按鈕
2. 數量減少1
3. 總計金額相對應減少商品單價

二、外部準備工作：

中繼器，兩個文本標簽，一個文本標簽寫上預算；另一個文本標簽取名為total用于顯示金額。

中繼器內部制作準備：圖片元件取名為tp，三個文本標簽分別取名為mc、jg和sl，減號按鈕，加號按鈕。

中繼器交互用例設置：中繼器添加三列分別為tp、mc、jg，然后添加數據。

中繼器每項加載時添加用例：每項加載時，設置文本jg的值等于函數￥[[Item.jg]]、文本mc的值等于函數[[Item.mc]]、設置圖片tp的值等于函數[[Item.tp]]。

中繼器交互用例完成之后，最主要的就是，后面在加減號按鈕上添加的交互。

加號按鈕添加用例：當鼠標點擊時添加用例

設置：

文本sl的值=函數[[LVAR1+1]]-局部變量函數LVAR1=元件sl的文字

設置：

文本總價total的值=函數￥[[Target.text.slice(1)+Item.jg]]

（Target.text.slice(1)：表示從第二個字符開始，截取當前交互所控制的total元件里面的文字字符）

減號按鈕添加用例：當鼠標點擊時添加用例——添加條件sl>0

（不添加條件的話當你點擊減號會出現負數）

1. 設置文本sl的值=函數[[LVAR1-1]]-局部變量函數LVAR1=元件sl的文字（這一步就不上圖片了，跟上面的加一樣。只不過函數“[[LVAR1+1]]”里面的“+”變成了“-”）
2. 設置文本總價total的值=函數￥[[Target.text.slice(1)-Item.jg]]（這一步也是和上面的一樣）

設置到這里基本已經好了，大家預覽一下看看。

如果還有什么問題可在評論區回復，我們一起討論！

本文由 @zero 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議