如何利用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 協議