微信小程序開發--購物車動畫與加減

微信小程序開發實現購物車動畫與加減的步驟教程：

實現如下業務邏輯

1. 購物車動畫

2. 購物車內加減

1、購物車動畫

cascadeToggle: function () {        //切換購物車開與關
    if (that.data.maskVisual == 'show') {
        that.cascadeDismiss();
    } else {
        that.cascadePopup();
    }
},
cascadePopup: function () {    // 購物車打開動畫
    var animation = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-in-out',
    });    this.animation = animation;
    animation.translateY(-285).step();    this.setData({
        animationData: this.animation.export(),
        maskVisual: 'show'
    });
},
cascadeDismiss: function () {        // 購物車關閉動畫
    this.animation.translateY(285).step();    this.setData({
        animationData: this.animation.export(),
        maskVisual: 'hidden'
    });
}

經過點擊控制顯示與隱藏，<view class="ft" bindtap="cascadeToggle">

而<view>層級經過z-index來解決，其中底部購物車.ft區別權重最高，設爲999，其次是彈窗主體.modal-content，其他默認不設定。

2、購物車加減

首先要讀取購物車數據，即cartData，它是以foodId爲key，數量爲value的object，因此須要轉換爲array，才能很好地被遍歷。

cartToArray: function (foodId) {
    // 須要判斷購物車數據中是否已經包含了原商品，從而決定新添加仍是僅修改它的數量
    var cartData = that.data.cartData;    
    var cartObjects = that.data.cartObjects;    
    var query = new Bmob.Query('Food');    
    // 查詢對象
    query.get(foodId).then(function (food) {        
    // 從數組找到該商品，並修改它的數量
        for (var i = 0; i < cartObjects.length; i++) {            
            if (cartObjects[i].food.id == foodId) {                
            // 若是是undefined，那麼就是經過點減號被刪完了
                if (cartData[foodId] == undefined) {
                   delete cartObjects[i];
                } else {
                    cartObjects[i].quantity = cartData[foodId];
                }
                that.setData({
                    cartObjects: cartObjects
                });                
                // 成功找到直接返回，再也不執行添加
                return ;
            }
        }        
        // 添加商品到數組
        var cart = {};
        cart.food = food;
        cart.quantity = cartData[foodId];
        cartObjects.push(cart);
        that.setData({
            cartObjects: cartObjects
        });
    });
}

而後在add/subtract方法末尾中調用它就能夠購物車鍵值對轉換成對象數組。

那接下來就瓜熟蒂落了，直接購物車小彈窗裏將cartObjects渲染就能夠了。

<view class="modal-body">
    <view class="item" wx:for="{{cartObjects}}">
        <view class="title">{{item.food.title}}</view>
        <view class="fee">{{item.food.price * item.quantity}}</view>
        <view class="stepper">
            <!-- 減號 -->
            <view class="symbol subtract" bindtap="subtract" wx:if="{{cartData[item.food.objectId]}}" data-food-id="{{item.food.objectId}}">-</view>
            <!-- 數量 -->
            <view class="value">{{cartData[item.food.objectId]}}</view>
            <!-- 加號 -->
            <view class="symbol add" bindtap="add" data-food-id="{{item.food.objectId}}">+</view>
        </view>
    </view></view>

得益於MVVM數據綁定，所以在購物車裏點加減也實時地同步了商品列表中顯示的數量。

彙總

amount: function() {    
    var cartObjects = that.data.cartObjects;
    var amount = 0;
    cartObjects.forEach(function (item, index) {
        amount += item.quantity * item.food.get('price');
    });
    that.setData({
        amount: amount
    });
}

這裏多請求了一次網絡，因爲請求是異步的，因此我將彙總代碼丟在網絡請求裏，於cartToArray方法內。

TODO

改成scroll-view顯示，而且高度自適應行數，直至一個max-height高度