效果图

github 传送门: https://github.com/hunter858/taobao
如果你喜欢我写的demo 请给我点个✨✨✨✨ 谢谢🙏😊
工程用的cocoapods 做的依赖管理,新下载的小伙伴 请用
pod update
更新库;
截图

-
1.1 简单介绍工程目录
-
1.2. 工程入口
首页的核心,其实就是抽象
tableview
的Control
层,将cell
的处理 ,数据的赋值,以及点击cell
的交互,放到了viewModel
层;
我们知道,实现
tableview
,一般在控制器需要实现tableiv
的delegate
方法 和dataSource
方法
TableViewDataModel
囊括了tableView 所有需要展示的cell, 响应tableivew 的cell 高度,以及cell 的点击事件,具体可以看看TableViewDataModel
的实现过程,其实就是抽象化对象;
- 1.3 我们来看一下,viewModel 具体如何实现的
homeViewModel
初始化,成为UItableView
的代理,homeViewModel
实现tableview
的所有代理方法。-setData:(void (^)())callback{}
方法加载数据,完成后通过block 回调 刷新tableview;

在这个方法内,我们发送网络请求拿到首页的数据(我是通过charles抓的taobao 的数据,写成 json 文件放在了本地);
所以你假装网络请求到了数据;-(vodi)LoadData
方法 是加载本地 数据的方法;

在工程内部有个文件夹放着 .chls 和 .json的文件,如果你有charles ,可以直接打开.chls ,拿到数据,然后把数据拷贝出来,放到 chrome 的 json handel 里,这样数据结构清晰可见;如图所示



仔细研究数据结构,你就会在里面找到规律,淘宝的整个数据结构是什么样子,它是如何排版整改页面的;

如果不太清楚数据的归属模块,可以把url
放到浏览器中,参考着taobao
的H5
页面,就知道哪个图片是taobao
哪个模块的了,taobao链接:https://m.taobao.com/#index

- 1.4 我们来看看,我们是如何实现第一个cell 的显示的;
- 创建流程
- 创建一个cell
- 创建一个cellModel
- 给cellModel 一个cell (当cellModel 响应tableview 的 方法);
- 给cellModel 一个cell高度 (当cellModel 响应tableview 的 方法);
- 给cellModel 一个点击Block (当cellModel 响应tableview 的 方法);
- 把cellModel 放到 TableViewDataModel 的section 里面;
等TableViewDataModel 响应了tableivew 的代理方法的时候,页面就出来了;嗯嗯、就是这么回事,等你想明白了,就理解了

UItableivewCell
我是通过- (id)initWithFrame:(CGRect)frame
方法创建的;这其实就是加载xib 的方法,只是这样写更安全一些,为什么要用xib 呢,因为xib 做布局 比用代码更快;

通过cell 响应 setSeparatorInset:
setLayoutMargins :
这两个方法,可以设置UItableview
的分割线的长度,让其显示不显示;
这里以首个cell
的滚动轮播器为例,把SDCycleScrollView
放到contentView
上,

声明一个赋值方法,把数据传进来,滚动轮播器就出来,是不是很简单;

在cell 的外部,我们声明一个block
属性,用于判断点击了 第几张图, 实现SDCycleScrollView
的代理方法, 把跳转的URL 传递到homeviewModel
里,这样我们是不是能根据URL
进行跳转了,对,就是这么简单,具体实现,你去工程里慢慢看;

差不多明白了吧,没看明白我再讲一个cell ,
以淘宝的菜单为例,拿到10 条数据的我, 创建一个个小的 smallIconView
,从上往下,依次排列成2 行,每行 5个的cell
,如图所示,是不是样子出来了,

项目中的smallIconView
其实不是普通的UIview
,创建的时候是个UIview
,但是UIView
本身没有点击事件,所以,我把UIView
换成了UIcontrol
;

最后在赋值数据的 时候,给每个 小的Control
添加一个方法 ,利用ReactiveCocoa
给它添加一个点击事件,把跳转URL 传到homeViewModel
中 ,是不是很简单

后面的很多cell
也是同样的道理 都写在了-(void)setData:(void (^)())callback
方法里;
因为 后面的跳转,我都是通过一个UIWebview
来显示的,所以不做过多赘述,如果你的项目比较复杂,可以把URL
传到工具里,利用工厂生成不同的UIViewControl
跳转到指定的控制器;
如果你喜欢我写的 demo
请给我点个✨✨✨✨ 谢谢🙏
网友评论