本文詳細(xì)講解：利用Axure中繼器實(shí)現(xiàn)商品數(shù)量的增減，以及商品價(jià)格的總計(jì)的操作流程。

一般在做購物車、預(yù)算表中都會涉及到商品數(shù)量的增減，與商品價(jià)格的合計(jì)。

那么，我們怎么通過中繼器來實(shí)現(xiàn)這個(gè)效果呢？本文將詳細(xì)講解此類設(shè)計(jì)的交互用例。

首先看下效果：

一、簡要設(shè)計(jì)思路：

1. 點(diǎn)擊增加按鈕
2. 數(shù)量增加1
3. 總計(jì)金額相對應(yīng)增加商品單價(jià)

同理，

1. 點(diǎn)擊減少按鈕
2. 數(shù)量減少1
3. 總計(jì)金額相對應(yīng)減少商品單價(jià)

二、外部準(zhǔn)備工作：

中繼器，兩個(gè)文本標(biāo)簽，一個(gè)文本標(biāo)簽寫上預(yù)算；另一個(gè)文本標(biāo)簽取名為total用于顯示金額。

中繼器內(nèi)部制作準(zhǔn)備：圖片元件取名為tp，三個(gè)文本標(biāo)簽分別取名為mc、jg和sl，減號按鈕，加號按鈕。

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

中繼器每項(xiàng)加載時(shí)添加用例：每項(xiàng)加載時(shí)，設(shè)置文本jg的值等于函數(shù)￥[[Item.jg]]、文本mc的值等于函數(shù)[[Item.mc]]、設(shè)置圖片tp的值等于函數(shù)[[Item.tp]]。

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

加號按鈕添加用例：當(dāng)鼠標(biāo)點(diǎn)擊時(shí)添加用例

設(shè)置：

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

設(shè)置：

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

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

減號按鈕添加用例：當(dāng)鼠標(biāo)點(diǎn)擊時(shí)添加用例——添加條件sl>0

（不添加條件的話當(dāng)你點(diǎn)擊減號會出現(xiàn)負(fù)數(shù)）

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

設(shè)置到這里基本已經(jīng)好了，大家預(yù)覽一下看看。

如果還有什么問題可在評論區(qū)回復(fù)，我們一起討論！

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

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