当前位置: 首页 > 编程笔记 >

IOS购物车界面实现效果示例

晏鸿畅
2023-03-14
本文向大家介绍IOS购物车界面实现效果示例,包括了IOS购物车界面实现效果示例的使用技巧和注意事项,需要的朋友参考一下

购物软件不可避免有添加购物车的页面,那么购物车功能是怎么实现的呐?这里提供一种简单的思路,插入本地数据库。

先看效果

页面结构

本页面是由一个tableview和底部的底部的bottomView构成

底部的bottomView上有按钮,也可以添加其他属性,比如总价格,总重量等参数。

代码结构


思路

看到这样的需求,我想到的是插入本地数据库,每一条数据都有对应的id和其他的例如价格等的参数,根据id插入本地是一条可行的方法,为了避免刷新的时候选中的单元格和没选中的单元格的复用,我们需要对按钮做一点操作。

@interface CustomButton : UIButton
@property (nonatomic,assign)NSInteger indexPathRow;
@end

在这个GoodCell里面自定义协议,为了取到某一行的值。

最重要的是选中与没选中的按钮要显示不同的颜色

#pragma mark - selectedBtnAction
-(void)selectedBtnAction:(CustomButton *)btn
{
  btn.selected=!btn.selected;
  [self.delegate GoodsCellDelegateWithIndexPath:btn.indexPathRow];
}

-(void)configWithModel:(GoodsModel *)model{
  self.model = model;
  if (model.btnIsSelected==YES) {
    [self.selectedBtn setImage:[UIImage imageNamed:@"sendcar_selected"] forState:UIControlStateNormal];
  }else{
    [self.selectedBtn setImage:[UIImage imageNamed:@"sendcar_unselected"] forState:UIControlStateNormal];
  }
  //运单号
  self.cardLabel.text = [NSString stringWithFormat:@"运单号:%@",self.model.Ticket_No];
}

控制器界面

代理协议的实现

#pragma mark - delegate
-(void)GoodsCellDelegateWithIndexPath:(NSInteger)indexPathRow
{

  GoodsModel *cacheModel = self.dataArr[indexPathRow];
  if (cacheModel.btnIsSelected) {
//    NSLog(@"YES==%@",cacheModel.Ticket_No);
    cacheModel.btnIsSelected = NO;
  } else {
//    NSLog(@"NO==%@",cacheModel.Ticket_No);
    cacheModel.btnIsSelected = YES;
  }
  //插入---删除  反复切换
  [self.dataManager insertDataFromModel:cacheModel Ticket_No:cacheModel.Ticket_No];
   //每次执行插入删除操作就会刷新底部的车辆的按钮
  [self reloadBottonViewUI];
  [self.tableView reloadRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:indexPathRow inSection:0]] withRowAnimation:UITableViewRowAnimationNone];
}
#pragma mark - 刷新底部的选车的数量  reloadBottonViewUI
-(void)reloadBottonViewUI
{
  if ([self.dataManager getAllGoodsArrCount]>0) {
    [self.toSelectCarBtn setTitle:[NSString stringWithFormat:@"去发车(%ld)",(long)[self.dataManager getAllGoodsArrCount]] forState:UIControlStateNormal];
  }else{
    [self.toSelectCarBtn setTitle:@"去发车" forState:UIControlStateNormal];
  }
}

去往下个页面需要选中的有数据

#pragma mark - 去选车
-(void)toSelectCarBtnAction
{
  if ([self.dataManager getAllGoodsArrCount]>0) {
    //do something
    [self showSingleAlertViewWith:self title:@"提示" message:@"do something"];
  }else{
    [self showSingleAlertViewWith:self title:@"提示" message:@"请选择物品"];
  }
}

代码下载:PurchuseCar_Demo_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍iOS实现电商购物车界面示例,包括了iOS实现电商购物车界面示例的使用技巧和注意事项,需要的朋友参考一下 先看界面效果图: 主要实现了商品的展示,并且可以对商品进行多选操作,以及改变商品的购买数量。与此同时,计算出,选中的总价格。 做此类型项目:要注意的:视图与数据要分离开来。视图的展现来源是数据模型层。所以我做的操作就是改变数据层的内容,在根据数据内容,去更新视图界面。 已下是具体

  • 本文向大家介绍iOS添加购物车动画效果示例,包括了iOS添加购物车动画效果示例的使用技巧和注意事项,需要的朋友参考一下 一、计算动画开始结束点位置 方法: 1) 动画开始位置fromCenter 2)动画结束位置endCenter 二、计算贝塞尔曲线(抛物线)的两个控制点 controlPoint1是控制点1 controlPoint2是控制点2 A是controlPoint1和controlPo

  • 本文向大家介绍详解Android实现购物车页面及购物车效果(点击动画),包括了详解Android实现购物车页面及购物车效果(点击动画)的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Android实现购物车页面及购物车效果(点击动画),分享给大家,具体如下: 效果图如下: 思路: (1)思考每个条目中的数字的更新原理。 (2)购物车的动画效果。 (3)购物清单怎么显示(这个我暂时没有写,如果需

  • 本文向大家介绍JS实现购物车特效,包括了JS实现购物车特效的使用技巧和注意事项,需要的朋友参考一下 效果: 1.点击全选按钮可以全选,再点击就全不选 2.点击数量 ‘ + ' ‘ -  ' 可以自动计算。并且合计保持更新。当数量大于1时‘ - '出现。小于等于1时‘ - '消失 3.点击删除可以实现删除功能。 4.点击全选旁的删除按钮可以全部删除。 5.选好商品后点击已选商品,可以显示选中的商品

  • 本文向大家介绍react-native 实现购物车滑动删除效果的示例代码,包括了react-native 实现购物车滑动删除效果的示例代码的使用技巧和注意事项,需要的朋友参考一下 购物车的功能基本上电商项目都会有的,这是一篇关于react-native的,原生android的已经好久没写了。记得以前写原生购物车的时候,遇到过产品的灵魂质问,为啥iOS的滑动删除可以,android却那么难实现的。这

  • 本文向大家介绍jQuery实现购物车表单自动结算效果实例,包括了jQuery实现购物车表单自动结算效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现购物车表单自动结算效果。分享给大家供大家参考。具体如下: 这里jQuery实现购物车表单自动结算,只要用户把所购商品的数量输入进去,就可以适时计算出商品总额,金额+运费,类似淘宝的购物车结算功能,计算过程是适时的,用jqu