如何利用Axure中繼器，實現商品數量增減、價格總計效果
摘要：
本文詳細講解：利用Axure中繼器實現商品數量的增減，以及商品價格的總計的操作流程。
一般在做購物車、預算表中都會涉及到商品數量的增減，與商品價格的合計。
那麼，我們怎麼通過中繼器來實現這個效果呢？本文將詳細講解此類設計的互動用例。
首先看下效果：
一、簡要...
本文詳細講解：利用Axure中繼器實現商品數量的增減，以及商品價格的總計的操作流程。
一般在做購物車、預算表中都會涉及到商品數量的增減，與商品價格的合計。
那麼，我們怎麼通過中繼器來實現這個效果呢？本文將詳細講解此類設計的互動用例。
首先看下效果：
一、簡要設計思路：
- 點選增加按鈕
- 數量增加1
- 總計金額相對應增加商品單價
同理，
- 點選減少按鈕
- 數量減少1
- 總計金額相對應減少商品單價
二、外部準備工作：
中繼器，兩個文字標籤，一個文字標籤寫上預算；另一個文字標籤取名為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
（不新增條件的話當你點選減號會出現負數）
- 設定 文字sl的值=函式[[LVAR1-1]]-區域性變數函式LVAR1=元件sl的文字 （這一步就不上圖片了，跟上面的加一樣。只不過函式“[[LVAR1+1]]”裡面的“+”變成了“-”）
- 設定 文字總價total的值=函式￥[[Target.text.slice(1)-Item.jg]] （這一步也是和上面的一樣）
設定到這裡基本已經好了，大家預覽一下看看。
如果還有什麼問題可在評論區回覆，我們一起討論！
本文由 @zero 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於 CC0 協議