看了前面幾位大神發的中繼器的九宮格啥的，我只能說：請收下我的膝蓋！中繼器我也就初級水平，就不獻丑了，還是給大家分享點我這水平能夠做到的東西，希望大家表噴我，多給我鼓勵鼓勵～撒浪嘿呦～

UP主要給大家分享的是某寶，你知道我說的是誰的，別裝（認真臉），就是大淘寶咯，它的購物車頁面的單個信息的加減和刪除。主要是練習下動態面板和認識下局部變量的應用。廢話不多說了，你們肯定急著要干貨，那就開始吧！Let’s begin，plz follow your heart（這是什么鬼？？？？）Pay attention to me（捂臉～～～～）

準備工作

準備工作我就一下子先把需要的元素都放上去，你們先不用管它們干嘛的，后面一一介紹，跟著我的文字動動你的鼠標，快快把各個元素都拉進工作區吧

• 手機框架（UP主懶，隨便拖了舉行框當手機框架）
• 商品信息1（先拖出一個動態面板1，商品模塊第一層，然后放上店鋪，商品圖，領券和編輯按鈕，還有個完成按鈕，然后再在此面板拖出個動態面板2，充當點擊編輯按鈕時的界面切換，在面板2里添加2個狀態state，一個狀態展示商品信息例如標題，尺碼，價格，另一個狀態展示加減和刪除商品，把各種按鈕拖進去，參看截圖來）
• 再來個同樣的商品，直接copy上面的即可，為商品信息2，你就當成不一樣的好了
• 兩個商品信息一列擺放（感覺是廢話，你們表嫌棄我）
• 開始命名，動態面板1叫商品1，動態面板2叫編輯切換，面板2的狀態1叫信息，狀態2叫編輯；文字按鈕命名，領券叫領券，編輯叫編輯按鈕，完成叫完成按鈕，加減號分別叫加和減，中間的數值叫計數，商品信息的個數叫計數和

差不多了，基本工作就這么多，若有遺漏請看截圖描述，上截圖。

來來來，進入下一部分，分析下要做哪些動作。

分析操作動作

淘寶的購物車操作比較多，總的來說就是商品的編輯，分解下編輯都做了啥，我要做啥。

淘寶購物車可以各種其他鏈接跳轉（這個這里不做，I don’t care），商品的重新選擇（我懶，不做），商品數量的編輯（本分享重點），商品的刪除（批量和單個，我只做單個刪除介紹）。

我要介紹的是商品信息和商品編輯的切換，由“編輯”按鈕觸發，“完成”按鈕返回，編輯狀態下可進行加減商品的數量，完成后回到信息界面，商品數量對應變化；叫編輯狀態下刪除商品，自動返回商品信息界面（中間還有個二次確認提示，我跳過了），當前商品消失，下方商品上移。

動作分解如下：

• 點擊編輯按鈕，領券按鈕消失，完成按鈕出現（編輯位置），編輯消失，界面變商品數量等修改樣子
• 編輯狀態下，可點擊加減按鈕改變數量
• 編輯狀態下，可點擊刪除按鈕，從購物車內刪除該商品
• 點擊完成按鈕，完成按鈕消失，出現領券和編輯，商品數量對應變化

分析完動作了，那就來開始實現吧。Let’s do it！

實現動作效果

一步一步來，心急吃不了熱豆腐的，表著急，UP主我比你還著急，好期待你們的點贊哦～～～～～～～

第一步：點擊編輯按鈕，領券按鈕消失，完成按鈕出現（編輯位置），編輯消失，界面變商品數量等修改樣子

給“編輯”按鈕添加用例，鼠標點擊時，隱藏“領券“，”編輯”按鈕，顯示“完成”按鈕，動態面板切換到“編輯”狀態?！巴瓿伞卑粹o和“編輯”按鈕疊加放在一個位置，別忘了，“完成”按鈕設成隱藏，選中右鍵即可看見選項。

嘗試一下，預覽下原型看看成功沒，好期待哦～

第二步：編輯狀態下，可點擊加減按鈕改變數量

點擊?實現數字加1，點擊?實現數字減1，當心，這里要注意，數字為1時，點擊?號數字就不能夠再減了。

加的動作添加完成，開始添加減的動作，動作與加相反，用例實質一樣，只需將加1修改為減1。對咯，有一點特別指出，那就是減要添加用例條件，即數字>1時才能操作，否則點擊無效。同樣的用例我就不截圖展示了，就展示下添加用例條件的啦～so lazy，沒救了。。。

喲喲喲，加減動作添完了，趕緊來預覽，wow，是不是成就感來了，已經完成一半了，堅持堅持，曙光在望。

第三步：編輯狀態下，可點擊刪除按鈕，從購物車內刪除該商品

給“刪除”按鈕添加用例，鼠標點擊時，隱藏“商品1“面板，“商品2”面板上移到1的位置。我添加了一點點的過渡的效果，便于觀察哦～

第三步寫到這里也是做完了，趕緊說說最后一步，完成原型。

最后一步：點擊完成按鈕，完成按鈕消失，出現領券和編輯，商品數量對應變化

這一步和就是第一步和第二步的結合體，點擊“完成”與“編輯”用例正好動作相反，隱藏的變顯示，顯示的變隱藏，商品計數與編輯時相同。原理相同，簡單截圖湊活看看吧～

分享到此結束，你有沒有做出來呢？仔細看清楚哦，相信你肯定能做出來的～～～～歡迎大家一起交流。

附上原型鏈接：

原型查看：http://kroi98.axshare.com

原型文件下載：

作者鏈接：http://pan.baidu.com/s/1i5ffOot ? ?密碼: pvy5

官方鏈接: http://pan.baidu.com/s/1boRKTLd 密碼: bxbc

作者：Lprecious，一枚還在成長的產品汪。

本文由 @Lprecious? 原創發布于人人都是產品經理?，未經許可，禁止轉載。