微信小程序之狀態管理A


其實這個標題 不是很對 主要是最近小程序項目中 有這么一個狀態

所有商品都共用一個商品詳情頁面 

大概就是這樣子  為了公司 保險起見,一些展示的內容已經處理 但是無傷大雅

就是這么兩個按鈕 左側粉色的為商城活動價格,右側為活動價格

那么說什么時候展示什么樣子的按鈕啊呢?

首先的思路為判斷該商品是否屬於我們做的活動中的商品,如果是我們活動中的商品,那么右側的按鈕是要出現的,若右側按鈕出現,那么左側按鈕則想圖片中展示一樣出現

若改商品不是屬於參與活動的商品那么右側按鈕是不出現的 左側按鈕則是平鋪 而並非一半的展示

問題來了

后天返回給你活動開始時間,活動結束時間,以及活動開始時間提前的小時, 活動結束延時的時間

是不是懵逼了  什么啊這都  什么叫做活動開始時間提前的小時  和活動結束延時的時間

是這樣的:

1.任何活動都不是在摸個時間段突然的開始,沒有一點點防備 也沒有一絲顧慮 它就這樣出現,所以要有提前的預示,

也就是在活動開始之前的某個時刻,這個活動按鈕是要出現的,在它還沒出現之前呢 ,正常購買的按鈕是正常平鋪的,它的出現就是一人一半,  but 點擊是沒有作用的 因為活動沒有開始  是不會讓你先買的,

會有好的給你彈出一個提示框 活動未開始

2. 當 當前時間到活動開始時間,該按鈕就可以被你為所欲為的點擊了跳轉 ,簡直就是旋轉,跳躍 我眯着眼,但是,敲黑板 雖說我們這歡天喜地的點擊這活動價格的按鈕,花着超低的價格,買着超值的產品

但是 地主家也有沒余糧的時候,庫存終將會空,那么庫存空了,還能下單么?當然不能 不然你下單了,我沒貨了,你干么!是不是,所以這時候需要再次判斷,此時庫存是否為0 ,如果庫存為0了,此時活動

按鈕要顯示另外一種風格 簡直就是百變大咖秀啊,什么風格呢 首先就是不能購買了,若是你慘無人道的點擊它,它會友好的告訴你商品已售罄,另外就是樣式了 延時要致灰,從而按鈕中顯示的也不是那個心動的活動價格了

而是已售罄

3 當 當前時間已經超過了活動截止時間,但是我們不會那么無情的就立刻就讓活動按鈕消失的,而是會繼續展示若干時間的,但是 展示歸展示,想購買?那就時刻關注我們的活動吧?彈出 活動已結束的字樣 以及按鈕上面

顯示的是已結束

怎么樣這么一套天馬流星拳下來是不是有點懵逼,甚至感覺冷冷的冰雨在臉上胡亂的拍呢:

正題:

思路:
    1.我們要分析,活動的按鈕什么時候出來?時間段如下

看見了么 這道愛的綠光? 就是這道光,如此美妙 只要當前時間在這個愛的綠光的范圍內,這個活動按鈕都是顯示的

<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.01</text>
    </button>

看見那個條件了么 

 wx:if="{{activity.coin1Show }}"

就是它來判斷 是否展示該活動按鈕的,那么在它的后面是怎么樣部位認知的秘密呢

首先我在Page({

         data{

              在這里要搞事情 定義一個狀態管理的對象 默認值根據不同狀態去設置true 和false

 

}

下文就在微信小程序之狀態管理B

data: {
        product: {},
        corp: {},
        activity: {coin1Show: false, unStart: false, doing: true, ended: false}
    },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM