微信小程序之狀態(tài)管理A
|
其實(shí)這個(gè)標(biāo)題 不是很對(duì) 主要是最近小程序項(xiàng)目中 有這么一個(gè)狀態(tài)
所有商品都共用一個(gè)商品詳情頁(yè)面 大概就是這樣子 為了公司 保險(xiǎn)起見(jiàn)，一些展示的內(nèi)容已經(jīng)處理 但是無(wú)傷大雅 就是這么兩個(gè)按鈕 左側(cè)粉色的為商城活動(dòng)價(jià)格，右側(cè)為活動(dòng)價(jià)格 那么說(shuō)什么時(shí)候展示什么樣子的按鈕啊呢？ 首先的思路為判斷該商品是否屬于我們做的活動(dòng)中的商品，如果是我們活動(dòng)中的商品，那么右側(cè)的按鈕是要出現(xiàn)的，若右側(cè)按鈕出現(xiàn)，那么左側(cè)按鈕則想圖片中展示一樣出現(xiàn)
若改商品不是屬于參與活動(dòng)的商品那么右側(cè)按鈕是不出現(xiàn)的 左側(cè)按鈕則是平鋪 而并非一半的展示 問(wèn)題來(lái)了后天返回給你活動(dòng)開(kāi)始時(shí)間，活動(dòng)結(jié)束時(shí)間，以及活動(dòng)開(kāi)始時(shí)間提前的小時(shí)， 活動(dòng)結(jié)束延時(shí)的時(shí)間 是不是懵逼了 什么啊這都 什么叫做活動(dòng)開(kāi)始時(shí)間提前的小時(shí) 和活動(dòng)結(jié)束延時(shí)的時(shí)間 是這樣的： 1.任何活動(dòng)都不是在摸個(gè)時(shí)間段突然的開(kāi)始，沒(méi)有一點(diǎn)點(diǎn)防備 也沒(méi)有一絲顧慮 它就這樣出現(xiàn)，所以要有提前的預(yù)示， 也就是在活動(dòng)開(kāi)始之前的某個(gè)時(shí)刻，這個(gè)活動(dòng)按鈕是要出現(xiàn)的，在它還沒(méi)出現(xiàn)之前呢 ，正常購(gòu)買的按鈕是正常平鋪的，它的出現(xiàn)就是一人一半， but 點(diǎn)擊是沒(méi)有作用的 因?yàn)榛顒?dòng)沒(méi)有開(kāi)始 是不會(huì)讓你先買的， 會(huì)有好的給你彈出一個(gè)提示框 活動(dòng)未開(kāi)始 2. 當(dāng) 當(dāng)前時(shí)間到活動(dòng)開(kāi)始時(shí)間，該按鈕就可以被你為所欲為的點(diǎn)擊了跳轉(zhuǎn) ，簡(jiǎn)直就是旋轉(zhuǎn)，跳躍 我瞇著眼，但是，敲黑板 雖說(shuō)我們這歡天喜地的點(diǎn)擊這活動(dòng)價(jià)格的按鈕，花著超低的價(jià)格，買著超值的產(chǎn)品 但是 地主家也有沒(méi)余糧的時(shí)候，庫(kù)存終將會(huì)空，那么庫(kù)存空了，還能下單么？當(dāng)然不能 不然你下單了，我沒(méi)貨了，你干么！是不是，所以這時(shí)候需要再次判斷，此時(shí)庫(kù)存是否為0 ，如果庫(kù)存為0了，此時(shí)活動(dòng) 按鈕要顯示另外一種風(fēng)格 簡(jiǎn)直就是百變大咖秀啊，什么風(fēng)格呢 首先就是不能購(gòu)買了，若是你慘無(wú)人道的點(diǎn)擊它，它會(huì)友好的告訴你商品已售罄，另外就是樣式了 延時(shí)要致灰，從而按鈕中顯示的也不是那個(gè)心動(dòng)的活動(dòng)價(jià)格了 而是已售罄 3 當(dāng) 當(dāng)前時(shí)間已經(jīng)超過(guò)了活動(dòng)截止時(shí)間，但是我們不會(huì)那么無(wú)情的就立刻就讓活動(dòng)按鈕消失的，而是會(huì)繼續(xù)展示若干時(shí)間的，但是 展示歸展示，想購(gòu)買？那就時(shí)刻關(guān)注我們的活動(dòng)吧？彈出 活動(dòng)已結(jié)束的字樣 以及按鈕上面 顯示的是已結(jié)束 怎么樣這么一套天馬流星拳下來(lái)是不是有點(diǎn)懵逼，甚至感覺(jué)冷冷的冰雨在臉上胡亂的拍呢： 正題：
思路：
看見(jiàn)了么 這道愛(ài)的綠光？ 就是這道光，如此美妙 只要當(dāng)前時(shí)間在這個(gè)愛(ài)的綠光的范圍內(nèi)，這個(gè)活動(dòng)按鈕都是顯示的 
<button class="btn right {{product.activityStock == 0 ? 'gray': '' }}" bindtap='toOrder'
data-price="1"
data-type="Coin1"
wx:if="{{activity.coin1Show }}">
<text class='sellOut' wx:if="{{activity.unStart}}">未開(kāi)始text>
<text class='sellOut' wx:if="{{activity.ended}}">已結(jié)束text>
<text class='sellOut' wx:if="{{activity.doing && product.activityStock == 0}}">已售罄text>
<text wx:else>￥0.01text>
button>
看見(jiàn)那個(gè)條件了么
wx:if="{{activity.coin1Show }}"
就是它來(lái)判斷 是否展示該活動(dòng)按鈕的，那么在它的后面是怎么樣部位認(rèn)知的秘密呢 首先我在Page({ data{ 在這里要搞事情 定義一個(gè)狀態(tài)管理的對(duì)象 默認(rèn)值根據(jù)不同狀態(tài)去設(shè)置true 和false
} } 下文就在微信小程序之狀態(tài)管理B
data: {
product: {},
corp: {},
activity: {coin1Show: false, unStart: false, doing: true, ended: false}
},
|
