iOS 仿阿里巴巴/电商规格选择器 电商通用规格选择器。

iOS 仿阿里巴巴/电商规格选择器 电商通用规格选择器。_第1张图片
image.png

前言

iOS 仿阿里巴巴/电商规格选择器 电商通用规格选择器。_第2张图片
未标题-2.png

仿阿里巴巴规格选择器,如果你有更好方案,请联系我,如果这个demo对你有帮助,请点一个star是对我最大的鼓励,小弟感激不尽!

Features

  • 初始化确定按钮颜色置灰,不可点击。
  • spu 颜色数量大于1个时,显示颜色导航,底部列表可以滚动,反之隐藏,布局自适应。
  • 如果有颜色导航,输入或点击 + - 按钮,颜色导航对应的颜色数字同步变化,如果数量大于99显示99+;如果数量小于1不显示。
  • 点击> < 底部列表和颜色导航同步滚动。
  • 输入或点击 + - 按钮,当按 +到最大库存 + 置灰;当按 - 到0 - 置灰。
  • 点击输入框。键盘弹出,[规格选择器]上移;点击完成,键盘收回,[规格选择器]回到原位。
  • 点击颜色导航条的颜色标签,高亮被点击颜色标签并滚动到屏幕中心,底部列表滑动到对应位置,同时切换 sku 图片。
  • 当输入或者点击数量大于1,确定按钮可点击,颜色高亮。
  • 当库存不足的时候,输入框下显示库存不足标签。
  • 输入框不可输入 0.
  • 列表行自适应高度,布局中心对齐。
  • 点击背景遮罩或者 x ,收回弹窗。
  • 动态输入监听,同步显示,根据输入判定确定状态。
  • 数据模型重新组装。
  • 适配IPhoneX及以上系列。

演示

iOS 仿阿里巴巴/电商规格选择器 电商通用规格选择器。_第3张图片
Untitled.gif

使用

demo 数据是从接口获取,需要连接wifi或蜂窝网络。

GHSpecificationSelectionTitleModel 颜色导航器模型
GHSpecificationSelectionModel sku 模型
GHSpecificationSelectionImageModel 图片模型

初始化对象
GHAlibabaSpecificationSelection继承 GHPopViewGHPopView 已经封装好弹出/收回动画,外部无需重复处理。

- (void)show;
- (void)dismiss

GHPopView暴露一个contentView容器视图,子控件可以直接添加到这个视图。

@property (nonatomic, strong) UIView *contentView;

contentViewHeightcontentView容器视图的高度,初始化的时候必传

#import GHAlibabaSpecificationSelection.h

- (GHAlibabaSpecificationSelection *)alibabaSpecificationSelection {
    if (_alibabaSpecificationSelection == nil) {
        _alibabaSpecificationSelection = [[GHAlibabaSpecificationSelection alloc]init];
        _alibabaSpecificationSelection.contentViewHeight = 500;
    }
    return _alibabaSpecificationSelection;
}

传入数据

/**
 * 数据源
 * @param skuList 装skuModel数组
 * @param colors 颜色数组 非必传,如果为空,不显示颜色导航
 * @param sectePrice 价格区间字典
 */
[self.alibabaSpecificationSelection setSkuList:specifications colors:colors sectePrice:sectePrice];

取出用户选择

  _alibabaSpecificationSelection.getDataBlock = ^(NSArray * _Nonnull dataArray) {
    NSMutableString *string = [NSMutableString string];
    for (NSDictionary *dict in dataArray) {
    [string appendFormat:@"颜色:%@  数量:%@  id:%@\n",dict[@"color"],dict[@"skuNum"],dict[@"skuId"]];
    }
    KAlert(@"用户选择的数据", string);
  };
  

重置数据

在这个方法内部清除所有count

底部scrollview 滚动到初始化状态。

底部确定按钮初始化状态。

scrollTitles初始化。

- (void) resetData;

demo

与我联系

[email protected]


你可能感兴趣的:(iOS 仿阿里巴巴/电商规格选择器 电商通用规格选择器。)