点餐小程序购物车效果实现

微信小程序点餐系统我们会用到购物车功能，添加菜品到购物车，以及点击数量加减，那么这种点餐小程序购物车效果要如何实现，下面为大家介绍。

自己的第一个点餐小程序，主要包括左右菜单联动、点击数量加减、菜单和购物车数量可以同步加减、购物车动画等，纯前端实现

代码块

主要代码块：

// 点击左侧分类切换右侧菜品
  changeRightMenu: function (e) {
    var classify = e.target.dataset.id;// 获取点击项的id
    var foodList = this.data.foodList;
    var allFoodList = this.data.allFoodList;
    var newFoodList = [];
    if (classify == 0) {//选择了全部选项
      this.setData({
        curNav: classify,
        foodList: allFoodList
      })
    } else { //选择了其他选项
      for (var i in allFoodList) {
        if (allFoodList[i].catid == classify) {
          newFoodList.push(allFoodList[i])
        }
      }
      this.setData({
        // 右侧菜单当前显示第curNav项
        curNav: classify,
        foodList: newFoodList
      })
    }
  }

// 购物车及菜单中增加数量
  addCount: function (e) {
    var id = e.currentTarget.dataset