前言
因?yàn)槟壳霸谧龅捻?xiàng)目是IM項(xiàng)目赁豆，所以產(chǎn)品經(jīng)常會(huì)提出些仿微信的需求冗美。最近，又來(lái)了這么一個(gè)需求-聊天頁(yè)頂部刷新要像微信那樣节预，刷新數(shù)據(jù)后新數(shù)據(jù)和舊數(shù)據(jù)無(wú)縫銜接在一起，無(wú)跳動(dòng)顯示安拟。
過(guò)程
首先，項(xiàng)目聊天頁(yè)用的是環(huán)信的EaseUI拙泽，刷新框架是明杰大神的MJRefresh。先說(shuō)說(shuō)底部刷新艾岂，底部刷新要實(shí)現(xiàn)上述效果其實(shí)很簡(jiǎn)單朋其，把新數(shù)據(jù)接到數(shù)組，先reload tableView,再endRefresh就好了梅猿，如下圖
但是钞啸，頂部刷新的機(jī)制就不一樣了喇潘，首先新數(shù)據(jù)是插在數(shù)組的前面，這是reloadtableview颖低，tableview頂部是顯示整個(gè)數(shù)組第一個(gè)數(shù)據(jù)忱屑，明顯是不對(duì)的蹬敲，而環(huán)信的EaseUI是通過(guò)tableview的scrollToRowAtIndexPath方法使tableview定位在刷新數(shù)據(jù)的最后一個(gè)數(shù)據(jù)莺戒，這樣顯示也是可以的，但是結(jié)合endRefresh的代碼之后瘪校，就會(huì)給人一種很突兀的體驗(yàn)名段，感覺(jué)數(shù)據(jù)是跳出來(lái)的赏寇，如下圖
說(shuō)了這么久价认，究竟怎樣才能實(shí)現(xiàn)上述數(shù)據(jù)很自然顯示的效果。其實(shí)很簡(jiǎn)單渠退，就是使用tableview的setContentOffset方法脐彩，獲得刷新的數(shù)據(jù)后，把數(shù)據(jù)插在數(shù)組前惠奸，算出所有數(shù)據(jù)的顯示高度總和后 ，這里要特別注意一點(diǎn)：高度的總和還要減去MJRefreshHeader的高度梗掰，之后才endRefreshing嗅回，這樣就能實(shí)現(xiàn)數(shù)據(jù)自然顯示了，如下代碼：
[self.tableView reloadData];
[self.tableView setContentOffset:CGPointMake(0, 1000-54)];
[self.tableView.header endRefreshing];
另外绵载，MJRefreshHeader的高度大家可以在下圖這個(gè)位置打個(gè)斷點(diǎn)看看
最后附上Demo地址
結(jié)束
剛開(kāi)始接到這樣的需求時(shí)娃豹，其實(shí)我是抗拒的。給我的感覺(jué)就是很難去實(shí)現(xiàn)懂版，甚至我都想到要去改MJRefresh這個(gè)框架的源碼，避免endRefresh的tableview的回彈。后來(lái)就探索到tableview的setContentOffset禾锤，就抱著試試的態(tài)度，沒(méi)想到這么輕易就完成了倡鲸。真的不得不感嘆：需求也是讓開(kāi)發(fā)人員進(jìn)步的需求黄娘。
