iOS仿淘宝购物车

作者: SwordDevil | 来源:发表于2017-02-24 09:49 被阅读966次

    很多做电商的朋友,总会被购物车所烦恼,因为不知道怎么去选择商品,或者是带商店的商品。这里我就简单的介绍下我的思路

    • 1.将商店或者商品的选择状态保存到model里面,这样可以避免每次滚动的时候 cell重用
    /**商品是否被选中*/
    @property (nonatomic, assign, getter=isSelected) BOOL selected;
    /**商店是否被选中*/ // 选中商店下边的所有商品
    @property (nonatomic, assign, getter=isAllSelect) BOOL allSelect;
    
    /**商品标题*/
    @property (nonatomic, copy) NSString *name;
    /**商品图标*/
    @property (nonatomic, copy) NSString *icon;
    /**商品单价*/
    @property (nonatomic, copy) NSString *price;
    /**购买数量*/
    @property (nonatomic, assign) int buyCount;
    
    @property (nonatomic, copy) NSMutableArray *numArray; // 存放商品个数
    
    • 2.我这里是分商品对应的商店的,以商店的数量作为section,商品的数量作为row 每个section上都加一个代表商店的cell
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        
        if (indexPath.row == 0) {
            static NSString *ID = @"shopCell1";
            JPShopHeaderCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
            if (!cell) {
                cell = [[NSBundle mainBundle]loadNibNamed:@"JPShopHeaderCell" owner:nil options:nil].lastObject;
            }
    
            JPCarModel *product = self.dataArray[indexPath.section];
            cell.model = product;
            return cell;
        }else
        {
            static NSString *ID = @"shopCell2";
            JPShopCarCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
            if (cell==nil) {
                cell = [[NSBundle mainBundle] loadNibNamed:@"JPShopCarCell" owner:nil options:nil].lastObject;
            }
            JPCarModel *product = self.dataArray[indexPath.section];
            JPCarModel *pro = product.numArray[indexPath.row - 1];
            cell.delegate = self;
            cell.model = pro;
            return cell;
        }
    }
    
    • 3.我这里是通过点击cell 的形式来确保点击按钮
    -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
        if (indexPath.row == 0) {
            // 选中商店 全选商店对应的商品
            // 拿到点击行的数据模型
            JPCarModel *product = self.dataArray[indexPath.section];
            // 设置选中状态
            product.allSelect = !product.isAllSelect;
    //        product.selected = product.allSelect;
            [product.numArray enumerateObjectsUsingBlock:^(JPCarModel *pro, NSUInteger idx, BOOL * _Nonnull stop) {
                pro.selected = product.allSelect;
            }];
            [self.tableView reloadData];
        } else
        {
            // 单独选中商品
            // 拿到点击行的数据模型
            JPCarModel *product = self.dataArray[indexPath.section];
            JPCarModel *pro = product.numArray[indexPath.row - 1];
            // 设置选中状态
            pro.selected = !pro.isSelected;
            // 刷新所选行
            [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
        }
        // 计算显示总价格
        [self countingTotalPrice];
    }
    
    • 4.这里简单的写了一个cell的简单动画
    // 复用队列
    -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
    {
        cell.layer.transform = CATransform3DMakeScale(1.5, 1.5, 0);
        cell.alpha = 0.0;
        [UIView animateWithDuration:1 animations:^{
            cell.layer.transform = CATransform3DIdentity;
            cell.alpha = 1.0;
        }];
    }
    

    最终效果

    Paste_Image.png
    说这么多估计大改了解一个思路 附上Demo一份希望能帮到大家

    结束语

    到这里就结束了,如若不懂的话可以👇留言,也可以加入群讨论
    喜欢的话 记得关注、收藏、点赞哟

    群号:552048526

    相关文章

      网友评论

      本文标题:iOS仿淘宝购物车

      本文链接:https://www.haomeiwen.com/subject/dbniwttx.html