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

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

(0)

相关推荐

  • 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实现电商购物车界面示例

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

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

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

  • IOS展开三级列表效果示例

    效果图如下: #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @end #import "AppDelegate.h" #import "RootViewController.h" @interface AppDelegate

  • react-native 实现购物车滑动删除效果的示例代码

    购物车的功能基本上电商项目都会有的,这是一篇关于react-native的,原生android的已经好久没写了.记得以前写原生购物车的时候,遇到过产品的灵魂质问,为啥iOS的滑动删除可以,android却那么难实现的.这个时候,我就打开微信说,android的微信版也是长按进行操作,iOS的是滑动操作的,两个平台自带的系统交互操作是不一样的.当然,最后还是默默的找各种三方库去进行滑动删除. rn的项目也是找的网上的一个三方库进行列表滑动操作的,github地址react-native-swipe

  • iOS 仿微博客户端红包加载界面 XLDotLoading效果

    一.显示效果 二.原理简介 1.思路 要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大.缩小的效果实现的这种有距离感的效果.思路如下: 一.这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做"相对运动"即可. 二.让硬币从左至右移动时先变小再回复正常:从右至左移动时先变大再回复正常:这样就实现了这用有距离感的"相对运动". 2.代码 第一步 要实现一个硬币在一定范围内实现左右往复运动,需要先固定一个范

  • ios电子书翻页效果代码详解

    近实现了一个完整的电子书阅读器,支持txt和epub格式的电子书阅读,其中epub支持图文混排的方式展示.本文主要谈谈其中两种翻页效果的实现,分别为仿真翻页和水平滑动翻页. 仿真翻页 最合适的方案就是使用系统提供的UIPageviewcontroller了,不过默认的UIpageviewcontroller翻页时背面是白色的,而阅读器通常都会有背景色或背景图片,翻页时用户体验就很糟糕,比如就像下面这样 所以接下来主要说说如何修改背面颜色以达到美观的翻页效果. UIpageviewcontroll

  • iOS开发之UIMenuController使用示例详解

    目录 简介 接口介绍 使用探索 如何创建并显示 UIMenuController 实现 Item 点击事件 菜单 Item 太多??? UIResponderStandardEditActions 协议 添加自定义菜单 箭头的方向 实际使用 总结 简介 UIMenuController 是一个菜单编辑界面,在很多地方都能用到,通常用于剪切.复制.粘贴.选择.全选和删除命令等,也可以自定义想要的操作,它长这样: 接口介绍 open class UIMenuController : NSObject

  • python tkinter实现界面切换的示例代码

    跳转实现思路 主程序相当于桌子: import tkinter as tk root = tk.Tk() 而不同的Frame相当于不同的桌布: face1 = tk.Frame(root) face2 = tk.Frame(root) ... 每个界面采用类的方式定义各自的控件和函数,每个界面都建立在一个各自定义的Frame上,那么在实现跳转界面的效果时, 只需要调用tkinter.destroy()方法销毁旧界面,同时生成新界面的对象,即可实现切换. 而对于切换的过程中改变背景颜色和大小,可以

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

  • PyQt5多线程刷新界面防假死示例

    在做GUI界面时我们希望后台任务能够与UI分开,在PyQt中,主线程用来重绘界面.而子线程里边的实时处理结果需要反馈到界面,子线程里边不能执行界面更新操作. wxpython多线程刷新界面转到 https://www.jb51.net/article/176308.htm 下面给出类Python3+PyQt5多线程防假死动态刷新界面的模板 from PyQt5 import QtWidgets, QtCore import sys from PyQt5.QtCore import * impor

  • iOS实现卡片堆叠效果

    本文实例为大家分享了iOS实现卡片堆叠效果的具体代码,供大家参考,具体内容如下 如图,这就是最终效果. 去年安卓5.0发布的时候,当我看到安卓全新的Material Design设计语言后,真的是喜欢的不得了,这种设计语言不同于偏平式设计以及卡片式设计.简约,自然.直到15年初,偶然看到CM团队已经发布了好多基于安卓5.0的ROM,恰巧有我手机对应的版本,便迫不及待的刷了固件,体验了一把. 不得不说的是,安卓的这个版本简直历史性变革,更加流畅,好用,而且在开发者模式下,发现这个版本移除了Dalv

随机推荐