自古一樓只鎮(zhèn)樓、不說事

WechatIMG106.png

　　依舊沒什么可前言的、有圖誰(shuí)嗶嗶是吧。

KTAlipay.gif

正文

去年就注意到支付寶的這個(gè)效果、但當(dāng)時(shí)沒什么特別好的想法。只是覺得、哎呀、這個(gè)tableView挪下去了、上面還能一起滑動(dòng)好流弊。
　　之前確實(shí)也做過一些嘗試。通過在scrollView上添加tableView、然后模擬上推的效果。但是上推途中需要不斷的控制tableView、一個(gè)簡(jiǎn)單的上滑事件做了N多操作以及判斷、結(jié)果就是卡頓、犧牲了很大一部分性能。我并沒有用Reveal去撬開看支付寶的具體層級(jí)。但我相信、一個(gè)大廠的團(tuán)隊(duì)不會(huì)打造出一個(gè)華而不實(shí)的效果（事實(shí)上、人家確實(shí)不卡、絲般順滑）。

我一直覺得。并不是每一個(gè)看似牛逼的功能、都有著難以想象的復(fù)雜度。沒必要為了自己覺得流弊而復(fù)雜。

然后昨天、靈感突然一現(xiàn)。
　　既然想那么流暢、那用系統(tǒng)的tableView不就好了。
　　至于滑動(dòng)條、完全可以用scrollIndicatorInsets來偽裝一下。
　　于是、有了下面這個(gè)想法。（不要在意錯(cuò)別字~這是昨天和別人討論完善時(shí)的一個(gè)截圖而已）

WechatIMG5893.jpeg

關(guān)于核心代碼

既然想法已經(jīng)出來了、那核心代碼其實(shí)猜都猜得到了。真的沒多少。

首先、是之前想到的頁(yè)面層級(jí)搭建
#pragma mark - setter && getter
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStyleGrouped];
_tableView.delegate = self;
_tableView.dataSource = self;

      /* 這里用一個(gè)透明的view將header撐開 */
      UIView *tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 200)];
      tableHeaderView.backgroundColor = [UIColor clearColor];
      _tableView.tableHeaderView = tableHeaderView;
      /* 修改scrollIndicatorInsets。仿造出tableView從下方開始的效果 */
      _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(200, 0, 0, 0);
      /* 再在header下方安裝一個(gè)刷新用的view */
      [_tableView.tableHeaderView addSubview:self.refreshHeaaderView];
  }
  return _tableView;
}

然后是對(duì)上推以及刷新實(shí)現(xiàn)
- (void)scrollViewDidScroll:(UIScrollView )scrollView {
CGFloat tableViewoffsetY = scrollView.contentOffset.y;
/ topView聯(lián)動(dòng) */
if ( tableViewoffsetY>=-64) {
self.topView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 200);

  }else if( tableViewoffsetY < -64){
    
      self.topView.frame = CGRectMake(0, 64 + tableViewoffsetY, SCREEN_WIDTH, 200);
    
  }

  /* 刷新用 */
  if (tableViewoffsetY > -64.0f) {
      self.refreshHeaaderView.type = typeNull;
  }else if (tableViewoffsetY > - 125.0f){
      self.refreshHeaaderView.type = typeWillRefresh;
  }else {
      self.refreshHeaaderView.type = typeRefreshing;
  }
}

末了、有一個(gè)小坑注意一下

/* 這里。展示用的topView需要添加在tableView上。不然導(dǎo)致在topView上面上下滑動(dòng)的時(shí)候無(wú)法與tableView聯(lián)動(dòng) */
[self.tableView addSubview:self.topView];

ps:關(guān)于MJ刷新怎么加、講真我沒做~~（不過我想、不愿意自己實(shí)現(xiàn)?？梢愿纱嘣趖ableView上面放一個(gè)MJ刷新應(yīng)該也好使...反正上面有個(gè)TopView蓋著也看不出來是在上面還有個(gè)刷新）

最后

本來想高仿一下、或者加點(diǎn)輪播啊之類的。但感覺功能太多代碼太長(zhǎng)自己就會(huì)懶得寫博客了....
　　所以、依舊只是個(gè)demo。老板要是能隨手來個(gè)贊就更好了。
　　https://github.com/kiritoSong/KTAlipayDemo