微信小程序开发--购物车动画与加减

微信小程序开发实现购物车动画与加减的步骤教程：

实现如下业务逻辑

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高度