国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

看了前面幾位大神發(fā)的中繼器的九宮格啥的，我只能說(shuō)：請(qǐng)收下我的膝蓋！中繼器我也就初級(jí)水平，就不獻(xiàn)丑了，還是給大家分享點(diǎn)我這水平能夠做到的東西，希望大家表噴我，多給我鼓勵(lì)鼓勵(lì)～撒浪嘿呦～

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

準(zhǔn)備工作

準(zhǔn)備工作我就一下子先把需要的元素都放上去，你們先不用管它們干嘛的，后面一一介紹，跟著我的文字動(dòng)動(dòng)你的鼠標(biāo)，快快把各個(gè)元素都拉進(jìn)工作區(qū)吧

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

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

來(lái)來(lái)來(lái)，進(jìn)入下一部分，分析下要做哪些動(dòng)作。

分析操作動(dòng)作

淘寶的購(gòu)物車操作比較多，總的來(lái)說(shuō)就是商品的編輯，分解下編輯都做了啥，我要做啥。

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

我要介紹的是商品信息和商品編輯的切換，由“編輯”按鈕觸發(fā)，“完成”按鈕返回，編輯狀態(tài)下可進(jìn)行加減商品的數(shù)量，完成后回到信息界面，商品數(shù)量對(duì)應(yīng)變化；叫編輯狀態(tài)下刪除商品，自動(dòng)返回商品信息界面（中間還有個(gè)二次確認(rèn)提示，我跳過(guò)了），當(dāng)前商品消失，下方商品上移。

動(dòng)作分解如下：

• 點(diǎn)擊編輯按鈕，領(lǐng)券按鈕消失，完成按鈕出現(xiàn)（編輯位置），編輯消失，界面變商品數(shù)量等修改樣子
• 編輯狀態(tài)下，可點(diǎn)擊加減按鈕改變數(shù)量
• 編輯狀態(tài)下，可點(diǎn)擊刪除按鈕，從購(gòu)物車內(nèi)刪除該商品
• 點(diǎn)擊完成按鈕，完成按鈕消失，出現(xiàn)領(lǐng)券和編輯，商品數(shù)量對(duì)應(yīng)變化

分析完動(dòng)作了，那就來(lái)開始實(shí)現(xiàn)吧。Let’s do it！

實(shí)現(xiàn)動(dòng)作效果

一步一步來(lái)，心急吃不了熱豆腐的，表著急，UP主我比你還著急，好期待你們的點(diǎn)贊哦～～～～～～～

第一步：點(diǎn)擊編輯按鈕，領(lǐng)券按鈕消失，完成按鈕出現(xiàn)（編輯位置），編輯消失，界面變商品數(shù)量等修改樣子

給“編輯”按鈕添加用例，鼠標(biāo)點(diǎn)擊時(shí)，隱藏“領(lǐng)券“，”編輯”按鈕，顯示“完成”按鈕，動(dòng)態(tài)面板切換到“編輯”狀態(tài)。“完成”按鈕和“編輯”按鈕疊加放在一個(gè)位置，別忘了，“完成”按鈕設(shè)成隱藏，選中右鍵即可看見選項(xiàng)。

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

第二步：編輯狀態(tài)下，可點(diǎn)擊加減按鈕改變數(shù)量

點(diǎn)擊?實(shí)現(xiàn)數(shù)字加1，點(diǎn)擊?實(shí)現(xiàn)數(shù)字減1，當(dāng)心，這里要注意，數(shù)字為1時(shí)，點(diǎn)擊?號(hào)數(shù)字就不能夠再減了。

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

喲喲喲，加減動(dòng)作添完了，趕緊來(lái)預(yù)覽，wow，是不是成就感來(lái)了，已經(jīng)完成一半了，堅(jiān)持堅(jiān)持，曙光在望。

第三步：編輯狀態(tài)下，可點(diǎn)擊刪除按鈕，從購(gòu)物車內(nèi)刪除該商品

給“刪除”按鈕添加用例，鼠標(biāo)點(diǎn)擊時(shí)，隱藏“商品1“面板，“商品2”面板上移到1的位置。我添加了一點(diǎn)點(diǎn)的過(guò)渡的效果，便于觀察哦～

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

最后一步：點(diǎn)擊完成按鈕，完成按鈕消失，出現(xiàn)領(lǐng)券和編輯，商品數(shù)量對(duì)應(yīng)變化

這一步和就是第一步和第二步的結(jié)合體，點(diǎn)擊“完成”與“編輯”用例正好動(dòng)作相反，隱藏的變顯示，顯示的變隱藏，商品計(jì)數(shù)與編輯時(shí)相同。原理相同，簡(jiǎn)單截圖湊活看看吧～

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

附上原型鏈接：

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

原型文件下載：

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

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

作者：Lprecious，一枚還在成長(zhǎng)的產(chǎn)品汪。

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