如何利用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 協議
評論
我這里顯示不對啊,哪里出錯了,他沒有加好放在總金額那里,而是把過程放在那里,怎么解決
total 這個文本框在中繼器外部? 為啥我獲取不到Item.jg這個中繼器的數據
您好,請問商品數量如果起始就是1,怎么計算總價呢?
親有原文件不,發個下載鏈接可以嗎?
Unidentified是什么元件?列表圖片為什么顯示不出來呀?
Unidentified表示錯誤信息,不能識別的信息。中繼器的圖片設置:點擊每相加載時—設置圖片—Default的值等于[[Item.tp]]
估計是你設置文本了 所以獲取不到圖片信息
total的函數是怎么設置的,搞不懂?
先要理解總價的值是怎么來的
你每次點擊加號 總價等于當前總價框里的值加上單價。總價那個文本框里顯示的不是¥0嘛,我要把¥去掉獲取0這個純數字然后加上每次加的價格。
為什么我設置條>0之后減號還是能點擊
最好是用最新的axure版本,設置一下應該可以的
干貨收藏了