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

最新推荐文章于 2023-01-04 20:57:30 发布

第九程序

最新推荐文章于 2023-01-04 20:57:30 发布

阅读量5.5k

点赞数 1

分类专栏：微信小程序开发微信小程序文章标签：小程序开发文档微信小程序开发微信小程序开发教程

本文链接：https://blog.csdn.net/qq_38125123/article/details/75457804

版权

本文档详细介绍了微信小程序中购物车动画的实现，包括通过点击控制显示与隐藏，利用z-index调整视图层级。同时，讲解了购物车商品数量的加减逻辑，如何读取和转换购物车数据，以及数据绑定确保加减操作同步更新商品列表。最后，文中提及了购物车汇总功能的实现，计划改进为滚动视图并实现高度自适应。

摘要由CSDN通过智能技术生成

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

实现以下业务逻辑

购物车动画
购物车内加减

一、购物车动画

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'
    });
}