iOS搭建简易购物车页面

本文实例为大家分享了iOS实现简单购物车页面的搭建,供大家参考,具体内容如下

1.基础页面的搭建

  • 在storyboard的cell中创建控件并进行约束,继承自定义的AZWineCell
  • 将cell中的子控件和自定义的AZWineCell一一进行连线
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *priceLabel;
@property (weak, nonatomic) IBOutlet UILabel *countLabel;
@property (weak, nonatomic) IBOutlet AZWineButton *minusBtn;
  • 让商品的增加和删减按钮继承于自定义的按钮,实现自定义样式
-(void)awakeFromNib
{
    self.layer.borderWidth=1;
    self.layer.borderColor=[UIColor orangeColor].CGColor;
    self.layer.cornerRadius=self.frame.size.width*0.5;
}

2.加载模型数据

  • 这里使用懒加载的方式加载数据
-(NSMutableArray *)wineArray
{
    if (!_wineArray) {
        // 获得路径
        NSString *path=[[NSBundle mainBundle]pathForResource:@"wine.plist" ofType:nil];
        // 获得数组
        NSArray *array=[NSArray arrayWithContentsOfFile:path];
        // 创建一个临时数组存放模型数据
        NSMutableArray *tempArray=[NSMutableArray array];
        // 添加模型
        for (NSDictionary *dict in array) {
            //字典转模型
            AZWine *wine=[AZWine wineWithDict:dict];
            // 实现对wine模型内num值变化的监听
            [wine addObserver:self forKeyPath:@"num" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
            [tempArray addObject:wine];
        }
        _wineArray=tempArray;

    }
    return _wineArray;;
}
  • 给cell绑定模型数据,在模型的set方法给cell注入数据
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 绑定标识
    static NSString *ID=@"wine";
    // 创建cell
    AZWineCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
    // 给cell注入数据
    cell.wine=self.wineArray[indexPath.row];
    // 返回cell
    return cell;
}
-(void)setWine:(AZWine *)wine
{
    _wine=wine;

    self.iconView.image=[UIImage imageNamed:wine.image];
    self.nameLabel.text=wine.name;
    self.priceLabel.text=wine.money;
    self.countLabel.text=[NSString stringWithFormat:@"%zd",wine.num];
    self.minusBtn.enabled=(wine.num>0);

}

3.设置代理,实现对按钮点击事件的监听

  • 自定义协议,提供协议方法供代理调用,监听按钮的点击
@protocol AZWineCellDelegate <NSObject>

@optional
/*增加商品按钮的点击*/
-(void)wineCellDidClickPlusButton:(AZWineCell *)cell;
/*删减商品按钮的点击*/
-(void)wineCellDidClickMinusButton:(AZWineCell *)cell;
@end

@interface AZWineCell : UITableViewCell
/*模型*/
@property(nonatomic,strong)AZWine *wine;
/*设置代理*/
@property(nonatomic, weak) id<AZWineCellDelegate> delegate;

@end
  • 修改模型数据,修改界面,通知代理实现协议方法
- (IBAction)minusClick {
    // 修改模型
    self.wine.num--;
    // 修改界面
    self.countLabel.text=[NSString stringWithFormat:@"%zd",self.wine.num];
    // 按钮是否可以点击
    if (self.wine.num==0) {
        self.minusBtn.enabled=NO;
    }
    // 通知代理
    if([self.delegate respondsToSelector:@selector(wineCellDidClickMinusButton:)]){
        [self.delegate wineCellDidClickMinusButton:self];
    }

}
- (IBAction)plusClick {
    // 修改模型
    self.wine.num++;
    // 修改界面
    self.countLabel.text=[NSString stringWithFormat:@"%zd",self.wine.num];
    // 按钮是否可以点击
    self.minusBtn.enabled=YES;
    // 通知代理
    if ([self.delegate respondsToSelector:@selector(wineCellDidClickPlusButton:)]) {
        [self.delegate wineCellDidClickPlusButton:self];
    }
}
  • 实现协议方法,完成总价的刷新
-(void)wineCellDidClickPlusButton:(AZWineCell *)cell
{
    // 计算总价
    int totalPrice=self.totalPriceView.text.intValue+cell.wine.money.intValue;
    // 刷新界面
    self.totalPriceView.text=[NSString stringWithFormat:@"%d",totalPrice];
    // 购买按钮
    self.purchaseBtn.enabled=YES;
    // 购物车
    if (![self.shoppingList containsObject:cell.wine]) {
        [self.shoppingList addObject:cell.wine];
    }

}

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

(0)

相关推荐

  • iOS实现自定义购物车角标显示购物数量(添加商品时角标抖动 Vie)

    前言: 适用场景:商城类的 App .将自定义的购物车 view 设置为 navigationItem 的导航栏按钮.效果图如下: 图1.右上角的购物车即是我们定义的view 实现原理: 1.利用 navigationItem 可以将 UIView 设置为导航栏的按钮: 2.将一个 UIButton 和 一个 UILabel 添加到一个 UIView 上.然后将这个 UIView 设置为 navigationItem 的右侧按钮:3.UILabel 控件的动画效果. 具体实现代码如下:​ ​1

  • iOS实现电商购物车界面示例

    先看界面效果图: 主要实现了商品的展示,并且可以对商品进行多选操作,以及改变商品的购买数量.与此同时,计算出,选中的总价格. 做此类型项目:要注意的:视图与数据要分离开来.视图的展现来源是数据模型层.所以我做的操作就是改变数据层的内容,在根据数据内容,去更新视图界面. 已下是具体实现思路与代码: 1. 实现步骤 在AppDelegate.m中包含ViewController.h头文件,创建ViewController对象(vc),接着创建一个UINavigationController对象(nV

  • iOS添加购物车动画效果示例

    一.计算动画开始结束点位置 方法: - (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view; 1) 动画开始位置fromCenter 复制代码 代码如下: CGPoint fromCenter =  [animationView convertPoint:CGPointMake(animationView.frame.size.width * 0.5f, animationView.frame.size.heig

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

    购物软件不可避免有添加购物车的页面,那么购物车功能是怎么实现的呐?这里提供一种简单的思路,插入本地数据库. 先看效果 页面结构 本页面是由一个tableview和底部的底部的bottomView构成 底部的bottomView上有按钮,也可以添加其他属性,比如总价格,总重量等参数. 代码结构 思路 看到这样的需求,我想到的是插入本地数据库,每一条数据都有对应的id和其他的例如价格等的参数,根据id插入本地是一条可行的方法,为了避免刷新的时候选中的单元格和没选中的单元格的复用,我们需要对按钮做一点

  • iOS搭建简易购物车页面

    本文实例为大家分享了iOS实现简单购物车页面的搭建,供大家参考,具体内容如下 1.基础页面的搭建 在storyboard的cell中创建控件并进行约束,继承自定义的AZWineCell 将cell中的子控件和自定义的AZWineCell一一进行连线 @property (weak, nonatomic) IBOutlet UIImageView *iconView; @property (weak, nonatomic) IBOutlet UILabel *nameLabel; @propert

  • Vue实现简易购物车页面

    VUE实现简易购物车效果,供大家参考,具体内容如下 简易的购物车小demo 引用了一下bootstrap3,的表格 <section id="gouwuche"> <table class="table table-hover"> <thead> <tr> <th> <input type="checkbox" @change="handlechange" v-

  • JavaScript编写一个简易购物车功能

    网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c

  • 搭建简易蓝牙定位系统的实现方法

    本文将简单介绍如何搭建一套蓝牙定位系统,供移动客户端(包括android和iOS)定位. 1.准备设备 所需硬件设备: (1)低功率蓝牙定位器若干(如:10个),网上有卖(单价从几十到几百都有) (2)android设备一台,系统版本4.2以上(SDK版本大于17) (3)iOS设备一台,支持蓝牙4.0 BLE 2.设置蓝牙定位器 移动设备扫描周边低功率蓝牙设备,可以获得蓝牙设备对应的Proximity UUID.Major.Minor等属性信息.而刚采购来的蓝牙设备属性可能都相同,互相区别不开

  • 使用session实现简易购物车功能

    本文实例为大家分享了用session实现简易购物车功能的具体代码,供大家参考,具体内容如下 整体思路:先写一个JSP用于实现商品图片的读取(再次之前要写好连接数据库),当点加入购物车市,根据商品唯一的标识来添加进去(我这里是商品的ID号),点击查看购物车可以看到刚添加进去的东西,和总价钱,点击删除商品可以删除商品.点击返回就到商品商城 前置工作: 我在WebContent下创建了一个imges的文件夹放我的图片 然后创建了一个product.java的实体类用来封装,如下: package co

  • IOS实现简易版的QQ下拉列表

    下面我们通过实例代码来一步步看怎么实现, 首先建立了两个模型类, 一个Friend, 一个FriendGroup类. 数据源用的本地的一个plist文件. plist文件中包含了FriendGroup的name,friends数组等属性. Friend.h 示例代码 #import <Foundation/Foundation.h> @interface Friend : NSObject @property (nonatomic, copy) NSString *name; @end Fri

  • php基于websocket搭建简易聊天室实践

    本文实例讲述了php基于websocket搭建简易聊天室实践.分享给大家供大家参考.具体如下: 1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短连接和长连接.短连接一般可以用ajax实现,长连接就是websocket.短连接实现起来比较简单,但是太过于消耗资源.websocket高效不过兼容存在点问题.websocket是html5的资源 2.前

  • 详解Android实现购物车页面及购物车效果(点击动画)

    本文介绍了Android实现购物车页面及购物车效果(点击动画),分享给大家,具体如下: 效果图如下: 思路: (1)思考每个条目中的数字的更新原理. (2)购物车的动画效果. (3)购物清单怎么显示(这个我暂时没有写,如果需要的话,可以在我的简书下给我留言). 1.因为进入页面,所有的商品个数都显示为零,所以我用 ArrayList<HashMap<String, Object>> data,把商品集合都附上零: //下面把data都添加0,为了刚开始显示时,显示的是0 for (

  • nodejs 搭建简易服务器的图文教程(推荐)

    www文件夹下 template文件夹下 server.js代码: const express=require('express'); const static=require('express-static'); //托管静态文件 const cookieParser=require('cookie-parser'); //解析cookie const cookieSession=require('cookie-session'); //解析session const bodyParser=r

  • iOS实现简易抽屉效果、双边抽屉效果

    本文实例为大家分享了iOS实现抽屉效果的全部代码,供大家参考,具体内容如下 iOS实现简易抽屉效果,代码: @interface ViewController () { UIView* _leftView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from

随机推荐