作品名稱：滑動拼圖驗證登錄效果
作品編號：Case010
軟件版本：Axure9
作品類型：交互案例
今天我們制作的是移動端的購物車結(jié)算效果饶氏，主要涉及的是中繼器的使用，全選以及數(shù)量的計算打厘。
原型預覽及下載鏈接：http://daisyaxure.com/demo/Case010
效果預覽：
一、中繼器數(shù)據(jù)綁定
準本元件
1.拖入一個中繼器元件贺辰，命名為「商品列表」户盯，樣式列表中設置布局為垂直嵌施，間距為10，填充數(shù)據(jù)如下：
2.雙擊進入中繼器莽鸭，拖入下圖中的所有元件吗伤，右鍵將所有元件設為組合，命名為「商品卡片」硫眨；商品小計作為計數(shù)的輔助元件足淆，右鍵設置為不可見。
添加交互
給中繼器「商品列表」添加【項目載入時】的交互捺球，將「商品卡片」中的元件與樣式面板中的數(shù)據(jù)集進行綁定缸浦。
1.添加動作，選擇【設置文本】氮兵，目標「商品名稱」設置為【文本】變量值為【[[Item.ProductName]]】裂逐；
3.繼續(xù)添加動作，選擇【設置圖片】泣栈，目標「商品圖片」設置default圖片為【值】【[[Item.Picture]]】卜高；
設置完成后
二、計數(shù)器
準備元件
1.拖入一個減少的按鈕和一個文本框南片，分別右鍵點擊【交互樣式】-【禁用】掺涛，設置顏色為灰色，右鍵這兩個元件設置為組合疼进，命名為「remove」薪缆；
2.同樣拖入一個增加的按鈕和一個文本框，右鍵這兩個元件設置為組合伞广，命名為「add」拣帽；
3.拖入一個文本框，隱藏邊框嚼锄，命名為「商品數(shù)量」减拭。
交互分析
1.點擊增加按鈕「add」，文本框「商品數(shù)量」的值+1
2.點擊減少按鈕「remove」区丑，文本框「商品數(shù)量」的值-1
3.「商品數(shù)量」的值為1時拧粪，減少按鈕「remove」不可點擊
4.「商品數(shù)量」的數(shù)值可手動輸入，當輸入的數(shù)值小于1時沧侥，失去焦點時可霎，數(shù)字自動變?yōu)?。
添加交互
1.給組合「add」添加【單擊時】【設置文本】宴杀，目標「商品數(shù)量」為【[[Target.text+1]]】啥纸；
2.給組合「remove」添加【單擊時】【設置文本】，目標「商品數(shù)量」為【[[Target.text-1]]】婴氮；
3.給文本框「商品數(shù)量」添加【文本改變時】的交互：
添加情形1斯棒，【元件文字】【當前】【==】【1】時盾致，添加動作【禁用】「remove」；
添加情形2荣暮，【元件文字】【當前】【>】【1】時庭惜，添加動作【啟用】「remove」。
這里需要做個判斷穗酥，「商品數(shù)量」數(shù)值最小為1护赊，所以當「商品數(shù)量」值為1 時，需要禁用減少按鈕「add」砾跃；因為「商品數(shù)量」是可以直接輸入數(shù)字的文本框骏啰，所以數(shù)值的判斷應該加在「商品數(shù)量」上。
4.給文本框「商品數(shù)量」添加【失去焦點時】的交互抽高，當【元件文字】【當前】【<】【1】時判耕，添加動作【設置文本】「當前」為【1】，目的是當我們輸入里小于1 的數(shù)字時翘骂，數(shù)量會自動變成1壁熄。
三、全選/取消全選的效果
準備元件
制作底部工具欄
拖入制作好的單選按鈕碳竟，命名為「全選按鈕」草丧；
拖入一個文本標簽，命名為「總價」莹桅；
拖入一個文本標簽昌执，命名為「選中數(shù)量計數(shù)」，右鍵設置為不可見诈泼。
交互分析
中繼器里含有3條數(shù)據(jù)仙蚜，這里我們使用一個文本「選中數(shù)量計數(shù)」來輔助我們完成全選效果；中繼器「商品列表」中的「單選按鈕」狀態(tài)為選中時厂汗，設置「選中數(shù)量計數(shù)」數(shù)值+1；「單選按鈕」狀態(tài)為取消選中時呜师，設置「選中數(shù)量計數(shù)」數(shù)值-1娶桦；并且當「選中數(shù)量計數(shù)」累計數(shù)值為3時，設置選中「全選按鈕」汁汗。
添加交互
1.雙擊中繼器「商品列表」衷畦，給「單選按鈕」添加動作【單擊時】，【設置選中】【當前】效果為【切換】知牌；
2.給「單選按鈕」添加動作【選中時】祈争，【設置文本】目標為「選中數(shù)量計數(shù)」值為【[[Target.text+1]]】；
繼續(xù)添加【選中時】的交互角寸，這時候我們需要啟用情形菩混，并且添加一個情形2忿墅，給情形2添加條件，【元件文字】「選中數(shù)量計數(shù)」【==】【3】時沮峡，添加動作【設置選中】「全選按鈕」為【真】疚脐；
3.同樣的給「單選按鈕」添加動作【取消選中時】，【設置文本】目標為「選中數(shù)量計數(shù)」值為【[[Target.text-1]]】邢疙；添加動作【設置選中】「全選按鈕」為【假】棍弄；
4.給「全選按鈕」添加動作【單擊時】，【設置選中】【當前】效果為【切換】疟游；
5.繼續(xù)添加【單擊時】的交互呼畸，這時候我們需要啟用情形，并且添加一個情形2颁虐，給情形2添加條件蛮原，如果【選中狀態(tài)】「當前」【==】【值】【真】時，【設置選中】「單選按鈕」效果為【真】聪廉；繼續(xù)添加情形【選中狀態(tài)】「當前」【==】【值】【假】時瞬痘，【設置選中】「單選按鈕」效果為【假】
完成上述步驟，全選/取消全選的效果就完成了板熊，請注意多個情形下的條件設置框全。
四、總價數(shù)值的計算
交互分析
影響「總價」數(shù)值變化的有單選按鈕/全選按鈕的選中狀態(tài)以及商品數(shù)量值的變化干签，這里我們需要借助文本標簽「商品小計」來實現(xiàn)津辩，「商品小計」的數(shù)值為每條數(shù)據(jù)中的商品價格與數(shù)量的乘積。
添加交互
1.給「商品小計」設置【載入時】的交互容劳，添加動作【設置文本】【當前】值為【[[Item.Price*number]]】
2.給「商品數(shù)量」添加【文本改變時】的交互喘沿，需要做「單選按鈕」選中狀態(tài)的判斷，只有選中時竭贩，「商品數(shù)量」的增減才會影響「總價」的數(shù)值蚜印，但是無論「單選按鈕」是否被選中，「商品數(shù)量」的變化時都需要記錄「商品小計」的值留量。
商品數(shù)量的值為：【￥[[(Target.text.slice(1)-subtotal+Item.Price*num).toFixed(2)]]】
這里我們要用此時總價的值先減去商品小計初始的值窄赋，再去累加商品數(shù)量乘以價格的值才是準確的，不然會重復計算楼熄。
slice(start,end) 用途：從當前文本對象中截取從指定起始位置開始到終止位置之前的字符串忆绰。參數(shù)：start為被截取部分的起始位置，該數(shù)值可為負數(shù)可岂；end為被截取部分的終止位置错敢，該數(shù)值可為負數(shù)。該參數(shù)可省略缕粹，省略該參數(shù)則由起始位置截取至文本對象結(jié)尾稚茅。
toFixed(decimalPoints)用途：將一個數(shù)字轉(zhuǎn)為保留指定位數(shù)的小數(shù)纸淮，小數(shù)位數(shù)超出指定位數(shù)時進行四舍五入。decimalPoints為保留位數(shù)峰锁，這里我們需要保留到小數(shù)點后2為萎馅，所以數(shù)值為2.
上述我們已經(jīng)做了文本的限制，加上單選按鈕的選中狀態(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é)滥比。
