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

作品編號：Case010

軟件版本：Axure9

作品類型：交互案例

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

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

效果預覽：

一、中繼器數據綁定

準本元件

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

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

添加交互

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

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

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

設置完成后

二、計數器

準備元件

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

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

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

交互分析

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

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

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

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

添加交互

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

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

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

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

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

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

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

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

準備元件

制作底部工具欄

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

拖入一個文本標簽，命名為「總價」；

拖入一個文本標簽，命名為「選中數量計數」，右鍵設置為不可見。

交互分析

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

添加交互

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

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

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

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

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

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

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

四、總價數值的計算

交互分析

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

添加交互

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

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

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

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

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

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

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

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

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

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

---

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。