前言
仿阿里巴巴规格选择器,如果你有更好方案,请联系我,[email protected]
如果这个demo
对你有帮助,请点一个★是对我最大的鼓励,感激不尽!
Features
初始化确定按钮颜色置灰,不可点击。
当 spu
颜色数量大于1 个时,显示颜色导航,底部列表可以滚动,反之隐藏,布局自适应。
如果有颜色导航,输入或点击 +
-
按钮,颜色导航对应的颜色数字同步变化,如果数量大于99 显示99 +;如果数量小于1 不显示。
点击>
<
底部列表和颜色导航同步滚动。
输入或点击 +
-
按钮,当按 +
到最大库存 +
置灰;当按 -
到0 -
置灰。
点击输入框。键盘弹出,规格选择器 上移;点击完成 ,键盘收回,规格选择器 回到原位。
点击颜色导航条的颜色标签,高亮被点击颜色标签并滚动到屏幕中心,底部列表滑动到对应位置,同时切换 sku
图片。
当输入或者点击数量大于1 ,确定按钮可点击,颜色高亮。
当库存不足的时候,输入框下显示库存不足
标签。
输入框不可输入 0
, .
等特殊符号。
列表行自适应高度,布局中心对齐。
点击背景遮罩或者 x
,收回弹窗。
动态输入监听,同步显示,根据输入判定确定按钮状态。
数据模型重新组装。
适配IPhoneX
及以上系列。
增加加入到购物车抛物线动画,购物车同步用户选择 sku
数量。
演示
使用
demo
数据是从接口获取,需要连接wifi
或蜂窝网络。
数据结构 (点击箭头展开/收起)
{
"data": [
{
"arrival_cycle": 5,
"sku_code": "000001",
"spu_id": 7280,
"sku_name": "我是测试数据黑色000001",
"virtual_stock": 9999,
"sale_price": "1.80",
"images": [
{
"img_url": "https://upload-images.jianshu.io/upload_images/1419035-0a54dde4c9663e36.png "
}
],
"specifications": "我是测试数据黑色000001",
"color": "黑",
"mini_order": 1,
"unit": "个",
"sku_id": 1
},
{
"arrival_cycle": 5,
"sku_code": "000002",
"spu_id": 7280,
"sku_name": "我是测试数据红色000001",
"virtual_stock": 9999,
"sale_price": "28.80",
"images": [
{
"img_url": "https://upload-images.jianshu.io/upload_images/1419035-8739c526d2790690.png "
}
],
"specifications": "1.5平方我是测试数据红色000001",
"color": "红",
"mini_order": 2,
"unit": "台",
"sku_id": 2
},
{
"arrival_cycle": 5,
"sku_code": "000003",
"sku_name": "我是测试数据黄色000003",
"virtual_stock": 9999,
"sale_price": "88.80",
"images": [
{
"img_url": "https://upload-images.jianshu.io/upload_images/1419035-4dd868e628b61cc6.png "
}
],
"specifications": "我是测试数据黄色000003",
"spu_code": "101191",
"color": "黄",
"mini_order": 3,
"unit": "把",
"sku_id": 3
},
{
"arrival_cycle": 5,
"sku_code": "000004",
"sku_name": "我是测试数据绿色000004",
"virtual_stock": 9999,
"sale_price": "88.80",
"images": [
{
"img_url": "https://upload-images.jianshu.io/upload_images/1419035-44c60adcf6a74843.png "
}
],
"specifications": "我是测试数据绿色000004",
"spu_code": "000004",
"color": "绿",
"mini_order": 4,
"unit": "只",
"sku_id": 4
},
{
"arrival_cycle": 5,
"sku_code": "000006",
"sku_name": "我是测试数据蓝色000005",
"virtual_stock": 9999,
"sale_price": "88.80",
"images": [
{
"img_url": "https://upload-images.jianshu.io/upload_images/1419035-08b4629d7bba016c.png "
}
],
"specifications": "我是测试数据蓝色000005",
"spu_code": "000006",
"color": "蓝",
"mini_order": 5,
"unit": "双",
"sku_id": 5
},
{
"arrival_cycle": 5,
"sku_code": "000006",
"sku_name": "我是测试数据白色000006",
"virtual_stock": 9999,
"sale_price": "88.80",
"images": [
{
"img_url": "https://upload-images.jianshu.io/upload_images/1419035-f9ecb0bbc4a2a405.png "
}
],
"specifications": "我是测试数据白色000006",
"spu_code": "000006",
"color": "白",
"mini_order": 6,
"unit": "呵呵",
"sku_id": 6
},
{
"arrival_cycle": 5,
"sku_code": "000007",
"spu_id": 7280,
"sku_name": "1.5平方我是测试数据黄绿000007",
"virtual_stock": 9999,
"sale_price": "88.80",
"images": [
{
"img_url": "https://upload-images.jianshu.io/upload_images/1419035-219ce100b765c4e6.png "
}
],
"specifications": "1.5平方我是测试数据黄绿000007",
"color": "黄绿",
"mini_order": 7,
"unit": "吨",
"sku_id": 7
}
],
"sectePrice": {
"max_price": "3107.00",
"min_price": "88.80"
},
"specifications": [
"1.5平方",
"2.5平方",
"4平方",
"6平方",
"10平方",
"16平方",
"25平方",
"35平方",
"50平方"
],
"color": [
"红",
"黄",
"绿",
"蓝",
"黑",
"白",
"黄绿"
]
}
GHSpecificationSelectionTitleModel
颜色导航器模型
GHSpecificationSelectionModel
sku
模型
GHSpecificationSelectionImageModel
图片模型
更新依赖库
如果更新 Pod
遇到问题,可以参考这篇文章
1.初始化对象
GHAlibabaSpecificationSelection
继承 GHPopView
,GHPopView
已经封装好弹出 /收回 动画,外部无需重复处理。
- (void )show;
- (void )dismiss
GHPopView
暴露一个contentView
容器视图,子控件可以直接添加到这个视图。
@property (nonatomic, strong) UIView *contentView;
其中contentViewHeight
是contentView
容器视图的高度,初始化的时候必传
#import GHAlibabaSpecificationSelection.h
2.传入数据
/* *
* 数据源
* @param skuList 装skuModel数组
* @param colors 颜色数组 非必传,如果为空,不显示颜色导航
* @param sectePrice 价格区间字典
*/
3.取出用户选择
4.重置数据
在这个方法内部清除所有count
。
底部scrollview
滚动到初始化状态。
底部确定按钮初始化状态。
scrollTitles
初始化。
与我联系
[email protected]