效果圖
github 傳送門: https://github.com/hunter858/taobao
如果你喜歡我寫的demo 請(qǐng)給我點(diǎn)個(gè)???? 謝謝????
工程用的cocoapods 做的依賴管理裂垦，新下載的小伙伴 請(qǐng)用
pod update更新庫(kù)卒蘸；
截圖
-
1.1 簡(jiǎn)單介紹工程目錄
-
1.2. 工程入口
首頁的核心厘擂，其實(shí)就是抽象
tableview的Control層德玫，將cell的處理 ，數(shù)據(jù)的賦值泼掠，以及點(diǎn)擊cell的交互铃辖，放到了viewModel層；
我們知道冬筒，實(shí)現(xiàn)
tableview,一般在控制器需要實(shí)現(xiàn)tableiv的delegate方法 和dataSource方法
TableViewDataModel囊括了tableView 所有需要展示的cell， 響應(yīng)tableivew 的cell 高度茅主，以及cell 的點(diǎn)擊事件舞痰，具體可以看看TableViewDataModel的實(shí)現(xiàn)過程，其實(shí)就是抽象化對(duì)象诀姚；
- 1.3 我們來看一下响牛，viewModel 具體如何實(shí)現(xiàn)的
homeViewModel初始化，成為UItableView的代理赫段，homeViewModel實(shí)現(xiàn)tableview的所有代理方法呀打。-setData:(void (^)())callback{}方法加載數(shù)據(jù),完成后通過block 回調(diào) 刷新tableview；
在這個(gè)方法內(nèi)糯笙，我們發(fā)送網(wǎng)絡(luò)請(qǐng)求拿到首頁的數(shù)據(jù)（我是通過charles抓的taobao 的數(shù)據(jù)店量，寫成 json 文件放在了本地）梗掰；
所以你假裝網(wǎng)絡(luò)請(qǐng)求到了數(shù)據(jù)；-(void)LoadData方法 是加載本地 數(shù)據(jù)的方法;
在工程內(nèi)部有個(gè)文件夾放著
.chls和.json的文件，如果你有charles脆烟，可以直接打開.chls颇象，拿到數(shù)據(jù)靠娱，然后把數(shù)據(jù)拷貝出來蓝纲，放到chrome的 json handel 里，這樣數(shù)據(jù)結(jié)構(gòu)清晰可見耘眨；如圖所示
仔細(xì)研究數(shù)據(jù)結(jié)構(gòu)昼榛，你就會(huì)在里面找到規(guī)律，淘寶的整個(gè)數(shù)據(jù)結(jié)構(gòu)是什么樣子剔难，它是如何排版整改頁面的胆屿；
如果不太清楚數(shù)據(jù)的歸屬模塊，可以把url放到瀏覽器中钥飞，參考著taobao的H5 頁面莺掠，就知道哪個(gè)圖片是 taobao 哪個(gè)模塊的了,taobao鏈接:https://m.taobao.com/#index
- 1.4 我們來看看衫嵌，我們是如何實(shí)現(xiàn)第一個(gè)cell 的顯示的读宙；
- 創(chuàng)建流程
- 創(chuàng)建一個(gè)
cell - 創(chuàng)建一個(gè)
cellModel - 給
cellModel一個(gè)cell（當(dāng)cellModel 響應(yīng)tableview 的 方法）； - 給
cellModel一個(gè)cell高度（當(dāng)cellModel 響應(yīng)tableview 的 方法）楔绞； - 給
cellModel一個(gè)點(diǎn)擊Block（當(dāng)cellModel 響應(yīng)tableview 的 方法）结闸； - 把cellModel 放到 TableViewDataModel 的section 里面唇兑；
- 創(chuàng)建一個(gè)
等TableViewDataModel 響應(yīng)了tableivew 的代理方法的時(shí)候，頁面就出來了桦锄；嗯嗯扎附、就是這么回事，等你想明白了结耀，就理解了
UItableivewCell我是通過- (id)initWithFrame:(CGRect)frame方法創(chuàng)建的留夜；這其實(shí)就是加載xib 的方法，只是這樣寫更安全一些图甜，為什么要用xib 呢碍粥，因?yàn)閤ib 做布局 比用代碼更快；
通過cell 響應(yīng) setSeparatorInset: setLayoutMargins : 這兩個(gè)方法黑毅，可以設(shè)置UItableview的分割線的長(zhǎng)度,讓其顯示不顯示嚼摩；
這里以首個(gè)cell的滾動(dòng)輪播器為例，把SDCycleScrollView放到contentView上矿瘦，
聲明一個(gè)賦值方法枕面，把數(shù)據(jù)傳進(jìn)來，滾動(dòng)輪播器就出來缚去，是不是很簡(jiǎn)單潮秘；
在cell 的外部，我們聲明一個(gè)block屬性病游，用于判斷點(diǎn)擊了 第幾張圖唇跨， 實(shí)現(xiàn)SDCycleScrollView的代理方法， 把跳轉(zhuǎn)的URL 傳遞到homeviewModel 里衬衬，這樣我們是不是能根據(jù)URL進(jìn)行跳轉(zhuǎn)了买猖，對(duì)，就是這么簡(jiǎn)單滋尉，具體實(shí)現(xiàn)玉控，你去工程里慢慢看；
差不多明白了吧狮惜，沒看明白我再講一個(gè)cell 高诺，
以淘寶的菜單為例，拿到10 條數(shù)據(jù)的我碾篡， 創(chuàng)建一個(gè)個(gè)小的 smallIconView虱而，從上往下，依次排列成2 行开泽，每行 5個(gè)的cell牡拇，如圖所示，是不是樣子出來了，
項(xiàng)目中的smallIconView其實(shí)不是普通的UIview 惠呼，創(chuàng)建的時(shí)候是個(gè)UIview导俘，但是UIView本身沒有點(diǎn)擊事件，所以剔蹋，我把UIView換成了UIcontrol ;
最后在賦值數(shù)據(jù)的 時(shí)候旅薄，給每個(gè) 小的Control 添加一個(gè)方法 ，利用ReactiveCocoa給它添加一個(gè)點(diǎn)擊事件泣崩，把跳轉(zhuǎn)URL 傳到homeViewModel中 少梁，是不是很簡(jiǎn)單
后面的很多cell也是同樣的道理 都寫在了-(void)setData:(void (^)())callback方法里;
因?yàn)?后面的跳轉(zhuǎn)，我都是通過一個(gè)UIWebview 來顯示的矫付，所以不做過多贅述猎莲，如果你的項(xiàng)目比較復(fù)雜，可以把URL傳到工具里技即，利用工廠生成不同的UIViewControl跳轉(zhuǎn)到指定的控制器著洼；
如果你喜歡我寫的 demo
請(qǐng)給我點(diǎn)個(gè)???? 謝謝??
