作品名稱：滑動拼圖驗證登錄效果

作品編號：Case010

軟件版本：Axure9

作品類型：交互案例

今天我們制作的是移動端的購物車結(jié)算效果，主要涉及的是中繼器的使用，全選以及數(shù)量的計算。

原型預(yù)覽鏈接（附源文件下載鏈接）：http://daisyaxure.com/demo/Case010

效果預(yù)覽：

一、中繼器數(shù)據(jù)綁定

準(zhǔn)本元件

1.拖入一個中繼器元件，命名為「商品列表」，樣式列表中設(shè)置布局為垂直，間距為10，填充數(shù)據(jù)如下：

2.雙擊進(jìn)入中繼器，拖入下圖中的所有元件，右鍵將所有元件設(shè)為組合，命名為「商品卡片」；商品小計作為計數(shù)的輔助元件，右鍵設(shè)置為不可見。

添加交互

給中繼器「商品列表」添加【項目載入時】的交互，將「商品卡片」中的元件與樣式面板中的數(shù)據(jù)集進(jìn)行綁定。

1.添加動作，選擇【設(shè)置文本】，目標(biāo)「商品名稱」設(shè)置為【文本】變量值為【[[Item.ProductName]]】；

3.繼續(xù)添加動作，選擇【設(shè)置圖片】，目標(biāo)「商品圖片」設(shè)置default圖片為【值】【[[Item.Picture]]】；

設(shè)置完成后

二、計數(shù)器

準(zhǔn)備元件

1.拖入一個減少的按鈕和一個文本框，分別右鍵點擊【交互樣式】-【禁用】，設(shè)置顏色為灰色，右鍵這兩個元件設(shè)置為組合，命名為「remove」；

2.同樣拖入一個增加的按鈕和一個文本框，右鍵這兩個元件設(shè)置為組合，命名為「add」；

3.拖入一個文本框，隱藏邊框，命名為「商品數(shù)量」。

交互分析

1.點擊增加按鈕「add」，文本框「商品數(shù)量」的值+1

2.點擊減少按鈕「remove」，文本框「商品數(shù)量」的值-1

3.「商品數(shù)量」的值為1時，減少按鈕「remove」不可點擊

4.「商品數(shù)量」的數(shù)值可手動輸入，當(dāng)輸入的數(shù)值小于1時，失去焦點時，數(shù)字自動變?yōu)?。

添加交互

1.給組合「add」添加【單擊時】【設(shè)置文本】，目標(biāo)「商品數(shù)量」為【[[Target.text+1]]】；

2.給組合「remove」添加【單擊時】【設(shè)置文本】，目標(biāo)「商品數(shù)量」為【[[Target.text-1]]】；

3.給文本框「商品數(shù)量」添加【文本改變時】的交互：

添加情形1，【元件文字】【當(dāng)前】【==】【1】時，添加動作【禁用】「remove」；

添加情形2，【元件文字】【當(dāng)前】【>】【1】時，添加動作【啟用】「remove」。

這里需要做個判斷，「商品數(shù)量」數(shù)值最小為1，所以當(dāng)「商品數(shù)量」值為1 時，需要禁用減少按鈕「add」；因為「商品數(shù)量」是可以直接輸入數(shù)字的文本框，所以數(shù)值的判斷應(yīng)該加在「商品數(shù)量」上。

4.給文本框「商品數(shù)量」添加【失去焦點時】的交互，當(dāng)【元件文字】【當(dāng)前】【<】【1】時，添加動作【設(shè)置文本】「當(dāng)前」為【1】，目的是當(dāng)我們輸入里小于1 的數(shù)字時，數(shù)量會自動變成1。

三、全選/取消全選的效果

準(zhǔn)備元件

制作底部工具欄

拖入制作好的單選按鈕，命名為「全選按鈕」；

拖入一個文本標(biāo)簽，命名為「總價」；

拖入一個文本標(biāo)簽，命名為「選中數(shù)量計數(shù)」，右鍵設(shè)置為不可見。

交互分析

中繼器里含有3條數(shù)據(jù)，這里我們使用一個文本「選中數(shù)量計數(shù)」來輔助我們完成全選效果；中繼器「商品列表」中的「單選按鈕」?fàn)顟B(tài)為選中時，設(shè)置「選中數(shù)量計數(shù)」數(shù)值+1；「單選按鈕」?fàn)顟B(tài)為取消選中時，設(shè)置「選中數(shù)量計數(shù)」數(shù)值-1；并且當(dāng)「選中數(shù)量計數(shù)」累計數(shù)值為3時，設(shè)置選中「全選按鈕」。

添加交互

1.雙擊中繼器「商品列表」，給「單選按鈕」添加動作【單擊時】，【設(shè)置選中】【當(dāng)前】效果為【切換】；

2.給「單選按鈕」添加動作【選中時】，【設(shè)置文本】目標(biāo)為「選中數(shù)量計數(shù)」值為【[[Target.text+1]]】；

繼續(xù)添加【選中時】的交互，這時候我們需要啟用情形，并且添加一個情形2，給情形2添加條件，【元件文字】「選中數(shù)量計數(shù)」【==】【3】時，添加動作【設(shè)置選中】「全選按鈕」為【真】；

3.同樣的給「單選按鈕」添加動作【取消選中時】，【設(shè)置文本】目標(biāo)為「選中數(shù)量計數(shù)」值為【[[Target.text-1]]】；添加動作【設(shè)置選中】「全選按鈕」為【假】；

4.給「全選按鈕」添加動作【單擊時】，【設(shè)置選中】【當(dāng)前】效果為【切換】；

5.繼續(xù)添加【單擊時】的交互，這時候我們需要啟用情形，并且添加一個情形2，給情形2添加條件，如果【選中狀態(tài)】「當(dāng)前」【==】【值】【真】時，【設(shè)置選中】「單選按鈕」效果為【真】；繼續(xù)添加情形【選中狀態(tài)】「當(dāng)前」【==】【值】【假】時，【設(shè)置選中】「單選按鈕」效果為【假】

完成上述步驟，全選/取消全選的效果就完成了，請注意多個情形下的條件設(shè)置。

四、總價數(shù)值的計算

交互分析

影響「總價」數(shù)值變化的有單選按鈕/全選按鈕的選中狀態(tài)以及商品數(shù)量值的變化，這里我們需要借助文本標(biāo)簽「商品小計」來實現(xiàn)，「商品小計」的數(shù)值為每條數(shù)據(jù)中的商品價格與數(shù)量的乘積。

添加交互

1.給「商品小計」設(shè)置【載入時】的交互，添加動作【設(shè)置文本】【當(dāng)前】值為【[[Item.Price*number]]】

2.給「商品數(shù)量」添加【文本改變時】的交互，需要做「單選按鈕」選中狀態(tài)的判斷，只有選中時，「商品數(shù)量」的增減才會影響「總價」的數(shù)值，但是無論「單選按鈕」是否被選中，「商品數(shù)量」的變化時都需要記錄「商品小計」的值。

商品數(shù)量的值為：【￥[[(Target.text.slice(1)-subtotal+Item.Price*num).toFixed(2)]]】

這里我們要用此時總價的值先減去商品小計初始的值，再去累加商品數(shù)量乘以價格的值才是準(zhǔn)確的，不然會重復(fù)計算。

slice(start,end) 用途：從當(dāng)前文本對象中截取從指定起始位置開始到終止位置之前的字符串。參數(shù)：start為被截取部分的起始位置，該數(shù)值可為負(fù)數(shù)；end為被截取部分的終止位置，該數(shù)值可為負(fù)數(shù)。該參數(shù)可省略，省略該參數(shù)則由起始位置截取至文本對象結(jié)尾。

toFixed(decimalPoints)用途：將一個數(shù)字轉(zhuǎn)為保留指定位數(shù)的小數(shù)，小數(shù)位數(shù)超出指定位數(shù)時進(jìn)行四舍五入。decimalPoints為保留位數(shù)，這里我們需要保留到小數(shù)點后2為，所以數(shù)值為2.

上述我們已經(jīng)做了文本的限制，加上單選按鈕的選中狀態(tài)，全部情形及交互如下：

3.給「單選按鈕」添加【選中時】的交互，【設(shè)置文本】目標(biāo)為「總價」，值為【￥[[(Target.text.slice(1)+Item.Pricenum).toFixed(2)]]】；給「單選按鈕」添加【取消選中時】的交互，【設(shè)置文本】目標(biāo)為「總價」，值為【￥[[(Target.text.slice(1)-Item.Pricenum).toFixed(2)]]】

4.因為取消全選時，總價的值應(yīng)該為0，所以最后還需要給「全選按鈕」的情形3添加一個【設(shè)置文本】的動作，目標(biāo)為「總價」，值為【￥0.00】

添加完成后就完成整個交互了，如果還有不清楚的地方，可在文章開頭點擊預(yù)覽鏈接中的下載按鈕，下載源文件查看交互細(xì)節(jié)。

---

更多高保真原型及交互案例請訪問：http://daisyaxure.com

總結(jié)

以上是生活随笔為你收集整理的【Axure交互教程】购物车结算效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。