中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文詳細(xì)講解了購物車金額的實時求和，一起來看看~

本文涉及到：點擊“購物車圖標(biāo)”增減購物商品數(shù)量；多次點擊購物車圖標(biāo)，只增加數(shù)量，不重復(fù)添加條目。在我的上一篇教程《中繼器使用場景（一）》中有具體操作辦法，在此不做贅述。

Axure中的一個難題：中繼器數(shù)據(jù)實時求和

先看一下運用在購物車實景操作中的效果，下方GIF圖：大家重點看“最下端的金額”變化，根據(jù)商品的多少、數(shù)量的多少，實時對數(shù)據(jù)求和。

為了講解清晰，我將高保真原型的邏輯提煉成簡單的部件，GIF圖展現(xiàn)如下：

首先，我們準(zhǔn)備如下元件

每個元件解釋如下：

1、商品列表中繼器（goods list），包含：購物車圖標(biāo)（shopping）、商品名稱（name）、商品價格（price）、商品數(shù)量（shuliang），其中商品數(shù)量（shuliang）不綁定元件賦值，只存在數(shù)據(jù)集中。

各項目賦值及初始值情況如下圖：注意￥符號的擺放位置。

2、購物車列表中繼器（shoppinglist），包含：商品名稱（name）、商品價格（price）、商品數(shù)量（shuliang），增加數(shù)量的“+”號（add），減少數(shù)量的“-”號（minus），每項的金額小計（xiaoji）。

各項目賦值及初始值情況如下圖：其中展示數(shù)量的元件，即在加減號中間的那個元件，必須是文本框，此步非常重要。注意￥符號的擺放位置。

3、過渡計算用的中繼器（temp）：此元件，在項目調(diào)試完畢后，設(shè)置為隱藏，在教程中，為了講解，未做隱藏。包含商品名稱（name2）該項不綁定元件賦值，只存在數(shù)據(jù)集中。提取購物車列表中繼器shoppinglist中的小計項目xiaoji2。

各項目賦值及初始值情況如下圖：

4、將各行“小計”金額數(shù)字脫離中繼器，取出數(shù)值用的矩形，命名為number。特別注意：此處必須是矩形，不能用文本框，具體原因，后續(xù)會講解到。此步非常重要，此元件，在項目調(diào)試完畢后，設(shè)置為隱藏。在教程中，為了講解，未做隱藏。

5、將上一步矩形number中的數(shù)值，轉(zhuǎn)變?yōu)閿?shù)組的文本框，命名為numbergroup。特別注意，與上一步相反，此處必須是文本框，不能為矩形，具體原因，后續(xù)會講解到。此步非常重要，此元件，在項目調(diào)試完畢后，設(shè)置為隱藏。在教程中，為了講解，未做隱藏。

6、將上一步文本框numbergroup中的數(shù)值，進(jìn)行數(shù)字的第一步提取，一共準(zhǔn)備三個文本框，分別命名為1、2、3，這些元件，在項目調(diào)試完畢后，設(shè)置為隱藏，在教程中，為了講解，未做隱藏。

7、將上一步文本框1、2、3中的數(shù)值，進(jìn)行數(shù)字的第二步提取。一共準(zhǔn)備三個文本框，分別命名為1-1、2-2、3-3，這些元件，在項目調(diào)試完畢后，設(shè)置為隱藏，在教程中，為了講解，未做隱藏。

8、合計金額用的文本框totalmoney，擺放位置在購物車列表中繼器下方，單獨存在，不放在中繼器中。

接下來，我們說思路：

在商品列表中繼器goods list中點擊購物車圖標(biāo) →在購物車列表中繼器shoppinglist中產(chǎn)生小計的金額 →通過過渡計算用的中繼器temp，將小計金額單獨提取出來? →? 中繼器內(nèi)不能直接求和，將小計金額的數(shù)字分離出中繼器即矩形number? ?→? 因為分離出來的是帶格式的無法分割的文本，要轉(zhuǎn)換為數(shù)組 文本框numbergroup? →? 將數(shù)組分成單個的數(shù)字? ?→? 將數(shù)字相加。

大功告成。

接下來，開始添加交互

1、在商品列表中繼器goods list中的購物車圖標(biāo)添加交互，截圖如下：

交互解釋：

Case 1、Case3的交互解釋參看《中繼器使用場景（一）》的具體講解，在此不做贅述。主要功能就是實現(xiàn)當(dāng)除了第一次點擊購物車以外，以后的重復(fù)點擊，在購物車列表中只增加數(shù)量，而不重復(fù)添加條目，同時因為數(shù)量增加了，小計金額不斷增加

所以 Case3的交互多了一個更新項目，為購物車列表shoppinglist計算小計金額：“xiaoji”一項的函數(shù)為：[[(Item.price*Item.shuliang).toFixed(2)]]，意思為：價格×數(shù)量。

然后將結(jié)果四舍五入保留兩位小數(shù)，toFixed()，在實際預(yù)覽時，有時保留兩位小數(shù)，有時沒有，誰知道怎么回事，不影響結(jié)果，無所謂，大家知道意思就行了。

Case2交互解釋如下：

條件：if “[[Item.shuliang]]” == “1”，旨在界定是第一次點擊購物車圖標(biāo)，解釋參看《中繼器使用場景（一）》的具體講解

第一步，在購物車列表中繼器shopping中添加一行新數(shù)據(jù)，具體對應(yīng)數(shù)據(jù)綁定如下，其中“xiaoji”一項的函數(shù)為：[[(Item.price*Item.shuliang).toFixed(2)]]，函數(shù)意思在上文做了說明，不做贅述。

第二步：在過渡計算用中繼器temp中添加一行新數(shù)據(jù)，具體對應(yīng)數(shù)據(jù)綁定如下：

解釋：將購物車列表頁中繼器shopping list中的小計項單獨提出來。

• 重點1：注意name2的綁定。
• 重點2：xiaoji2的函數(shù)形式[[Item.price*Item.shuliang.toFixed(2)]]￥，注意￥的擺放位置，這個日后要做分割數(shù)組的標(biāo)志，非常重要。這個￥符號，可以為任何符號，但是一定要寫在[[]]外面，并且寫在末尾，后續(xù)具體解釋，此步非常重要。

寫到這一步，我們來看看交互效果GIF，注意過渡計算temp中的數(shù)值，￥符號的位置。

另外，大家在演示時，會發(fā)現(xiàn)你們的原型購物車列表中的數(shù)量在＞1時，過渡計算用的中繼器temp數(shù)據(jù)不更新，不像我的gif演示時的效果，那是因為還有后續(xù)的交互未添加，不要著急。因為還沒有到算總和的時候，所以我先把總計部分的元件蓋住了。

第三步，將過渡計算用中繼器temp中的數(shù)據(jù)，脫離出中繼器，非常關(guān)鍵。

解釋：設(shè)置用于提取數(shù)字的矩形number的文字==[[LVAR1]]，而這個局部變量LVAR1=元件temp，一定注意在局部變量類型框里，一定選擇“元件”，這樣就將數(shù)字全部脫離中繼器。一定要注意提取數(shù)字的number元件必須是矩形，而不能是文本框，如果是文本框的話，將不能提取出數(shù)字，而是顯示代碼[object Object]，意思是一個對象。

我們來看交互效果GIF：另外，大家在演示時，會發(fā)現(xiàn)你們的原型購物車列表中的數(shù)量在＞1時，過渡計算用的中繼器temp數(shù)據(jù)不更新，不像我的gif演示時的效果，那是因為還有后續(xù)的交互未添加，不要著急。

第四步：number中的數(shù)據(jù)，轉(zhuǎn)化為數(shù)組，非常關(guān)鍵。

解釋：存放數(shù)組文本框numbergroup的文字為[[LVAR1.split(‘￥’)]]，局部變量LVAR1=number的元件文字，split(‘separator’,limit)這個函數(shù)的意思是，將當(dāng)前文本對象中與分隔字符相同的字符轉(zhuǎn)為“,”，形成多組字符串，并返回從左開始的指定組數(shù)。

參數(shù)：separator為分隔字符，分隔字符可以為空，為空時將分隔每個字符為一組；limit為返回組數(shù)的數(shù)值，該參數(shù)可以省略，省略該參數(shù)則返回所有字符串組。

[[LVAR1.split(‘￥’)]]意思即為將矩形number中的 ￥ 字符轉(zhuǎn)換為“,”并將所有的字符全部分組即形成類似（1,2,3）這種并排數(shù)組數(shù)組形式。

一定注意：numbergroup元件必須是文本框，而不能是矩形，如果是矩形的話，只是把“￥”換成“,”形成帶回車格式，上下排放的數(shù)字。在Axure對于有回車格式的字符串，是無法進(jìn)行截取的，這樣就不能將所有數(shù)字分開。

我們來看交互效果GIF：另外，大家在演示時，會發(fā)現(xiàn)你們的原型購物車列表中的數(shù)量在＞1時，過渡計算用的中繼器temp數(shù)據(jù)不更新，不像我的gif演示時的效果，那是因為還有后續(xù)的交互未添加，不要著急。

第五步：設(shè)置總計totalmoney文字為￥[[LVAR1+LVAR2+LVAR3]]，這個我們一會兒再講。

到這里，商品列表中繼器goods list里的交互就做完了。

在購物車列表中繼器shoppinglist中，添加交互

1. 在增加數(shù)量的按鈕“+”上添加交互

解釋：

第一步：每次點擊時，更新本行數(shù)據(jù)中的數(shù)量列shuliang加1??[[Item.shuliang+1]]。

第二步：因為數(shù)量改變了，所以小計金額也要更新，所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

2. 在減少數(shù)量的按鈕“—”上添加交互

（1）條件：if “[[Item.shuliang]]” > “1”時的交互

解釋：

第一步：每次點擊時，更新本行數(shù)據(jù)中的數(shù)量列shuliang減1?[[Item.shuliang-1]]。

第二步：因為數(shù)量改變了，所以小計金額也要更新，所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

（2）條件：Else if “[[Item.shuliang]]” == “1”時的交互

第一步：商品數(shù)量是1時，每次點擊減號時，數(shù)值不再更新，意思即不能出現(xiàn)0和負(fù)數(shù)；不能出現(xiàn)0，是因為，實際操作中，如果所選商品數(shù)量為0，即表示刪除產(chǎn)品，會有單獨刪除產(chǎn)品的交互。負(fù)數(shù)就不用解釋了，商品數(shù)量不能為負(fù)，所以更新本行數(shù)據(jù)中的數(shù)量列shuliang為 [[Item.shuliang]]本身，或直接寫1也可以

第二步：因為數(shù)量改變了，所以小計金額也要更新，所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

3. “+”與“—”之間的顯示數(shù)量的文本框shuliang上添加交互

第一步，當(dāng)文本改變時，更新過渡計算用中繼器temp中相應(yīng)數(shù)據(jù)。

更新條件：[[Item.name==TargetItem.name2]] 找到同條數(shù)據(jù)，靠name來識別。

更新列：xiaoji2,所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述，注意￥的擺放位置[[(Item.price*Item.shuliang).toFixed(2)]]￥

第二步，將過渡計算用中繼器中temp中的數(shù)據(jù)，脫離出中繼器，存放在矩形number中非常關(guān)鍵。所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

第三步：number中的數(shù)字，轉(zhuǎn)化為數(shù)組，存放在文本框numbergroup中，非常關(guān)鍵。所用函數(shù)及公式，前面已經(jīng)詳述，不再贅述。

我們來看交互效果GIF：現(xiàn)在大家在演示時，過渡計算用的中繼器temp數(shù)據(jù)已經(jīng)實時更新了。

第四步：設(shè)置總計totalmoney文字為￥[[LVAR1+LVAR2+LVAR3]]。這個我們一會兒再講。

到這里，購物車列表中繼器shoppinglist里的交互就做完了。

開始拆數(shù)字

在數(shù)組文本框numbergroup中，加入交互動作。

解釋：當(dāng)文本框中有數(shù)組出現(xiàn)時，即文本改變時。

第一步：設(shè)置用于進(jìn)一步分解數(shù)組的文本框1等于numbergroup的文本，即1==[[this.text]]。

第二步：設(shè)置用于進(jìn)一步分解數(shù)組的文本框2等于文本框1的部分文本，即[[LVAR1.slice(LVAR1.indexOf(‘,’)+1)]]。

LVAR1局部變量代表文本框1的文字。

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

indexOf(‘searchValue’)用途：從左至右獲取查詢字符串在當(dāng)前文本對象中首次出現(xiàn)的位置。參數(shù)：searchValue為查詢的字符串。

[[LVAR1.slice(LVAR1.indexOf(‘,’)+1)]]整體的意思為，截取文本框1的部分文字，位置為第一個逗號’,’后面的所有文字。

第三步：設(shè)置用于進(jìn)一步分解數(shù)組的文本框3等于文本框2的部分文本，即[[LVAR2.slice(LVAR2.indexOf(‘,’)+1)]]。

LVAR2局部變量代表文本框2的文字，函數(shù)及意義同上，不再贅述。

要特別注意上面三個步驟，一定要一條一條寫，既不能都寫在一條里，上下位置也不能亂，因為文本框2是基于文本框1得來的，文本框3是基于文本框2得來的，這個順序很重要。

大家看一下演示效果GIF，具體看文本框1、2、3的變化。

到這里，數(shù)組文本框numbergroup里的交互就做完了

進(jìn)一步拆數(shù)字

分別在文本框1、2、3中加入交互動作，交互動作動一樣。

以文本框1為例：在文本改變時，設(shè)置文本框1-1的文字為[[this.text.slice(0,this.text.indexOf(‘,’))]]。

[[this.text.slice(0,this.text.indexOf(‘,’))]]的意思是，截取文本框1的一部分文字，起始位置0即第一個字符，終止位置為第一個逗號之前的這部分文字。

將這個交互分別復(fù)制到文本框2、3中，我們來看一下交互效果GIF：

到這里，所有的數(shù)據(jù)都分離成功了。

開始求和，匯總數(shù)字

剛才我們再講商品列表頁中繼器goods list點擊購物車圖標(biāo)時的交互，和購物車列表頁中繼器shoppinglist點擊數(shù)量文本框shuliang文字變化時的交互時，都有一個設(shè)置總計totalmoney文字為￥[[LVAR1+LVAR2+LVAR3]]的交互沒有講，這個就是最后的匯總步驟。

注意￥符號位置。

回到上述交互中，將LVAR1、LVAR2、LVAR3局部變量分別代表文本框1-1、2-2、3-3。

這樣就達(dá)到了匯總數(shù)據(jù)，接下來GIF圖效果，重點看總計部分。

將紅色標(biāo)注的元件隱藏后，就是如下效果：

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

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