小程序模板网

黄秀杰实战教程--购物车动画与加减

发布时间:2017-12-26 11:38 所属栏目:小程序开发教程

实现以下业务逻辑购物车动画购物车内加减一、购物车动画cascadeToggle: function () { //切换购物车开与关 if (that.data.maskVisual == 'show') { that.cascadeDismiss(); } else { that.cascadePopup() ...

 
 
 

实现以下业务逻辑

  1. 购物车动画

  2. 购物车内加减

一、购物车动画

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,其余默认不设定。

二、购物车加减

首先要读取购物车数据,即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高度



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18247.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询