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