Android仿饿了么加减控件,小程序仿饿了么弹窗式购物车

效果图

包含以下模块

选购页实现切换分类与数量加减

购物车动画与同步数量加减

购物车弹窗自适应商品条数

一、 点击分类项，切换右边的食品，并高亮自身

这个实现比较简单，给一个states数组，用于记录每一项分类的状态，点击设为true，wxml渲染时三目运算判断即可。

categoryStates = categoryStates.map(function (item, i) {

if (index == i) {

item = true;

} else {

item = false;

}

return item;

});

相应的wxml文件，class="{ {categoryStates[index] ? 'category-item-active' : ''}}"

二、 加减按钮

初始只有一个加号

点击加号后，相应商品数量+1，并出现减号

减至0时，减号消失，连同数量值

设计数组结构

cartData: {}，它的键是Food表的objectId，值是数量。

以下是js代码实现

add: function (e) {

// 所点商品id

var foodId = e.currentTarget.dataset.foodId;

console.log(foodId);

// 读取目前购物车数据

var cartData = that.data.cartData;

// 获取当前商品数量

var foodCount = cartData[foodId] ? cartData[foodId] : 0;

// 自增1后存回

cartData[foodId] = ++foodCount;

// 设值到data数据中

that.setData({

cartData: cartData

});

}

在wxml文件中绑定数据如下

-

{ {cartData[item.objectId]}}

+

上述代码中，通过wx:i