支付宝首页刷新滑动效果

实现结果

先给大家看下效果图。

实现效果图

实现原理

实现支付宝首页刷新滑动效果用一个tableView。用一个tableView比较简单，需要考虑三个问题：

1.下拉滑动深灰色view的时候需要深灰色的view不动；

2.刷新的位置在深灰色view下面位置；

3.tableView滚动条的位置是在深灰色view下面；

解决这三个问题，问题也就迎刃而解了。

下拉深灰色view保持不动

这里用了一个fakeTableHeaderView作为tableView的子view，用一个透明的view作为tableView的TableHeaderView，当tableView下拉的contentOffset.y<0时，我们改变对应fakeTableHeaderView的y坐标，使其一直在顶部。代码如下：

- (void)scrollViewDidScroll:(UIScrollView*)scrollView{

    CGFloattableViewoffsetY = scrollView.contentOffset.y;

    if( tableViewoffsetY <=0){

        self.fakeTableHeaderView.frame = CGRectMake(0, tableViewoffsetY, kScreenWidth, TableHeaderViewHeight);

    }

}

刷新的位置在深灰色view下面位置

刷新基于MJRefreash，写了一个笑脸的layer动画，有提供一个参数ignoredScrollViewContentInsetTop可以直接设置其刷新的偏移量，所以我们可以设置这个参数，让刷新的位置在tableHeaderView的下面。

//TableHeaderViewHeight为tableHeaderView高度

self.tableView.mj_header.ignoredScrollViewContentInsetTop = -TableHeaderViewHeight;

tableView滚动条的位置是在深灰色view下面

这个可以用scrollIndicatorInsets来伪装 这个伪造思路来源于kirito_song 很感谢，一直纠结于这个滚动条怎么实现，看到他写的支付宝首页效果可以通过设置这个。我们实现思路一样，有兴趣的同学可以去看看。

 /* 修改scrollIndicatorInsets。仿造出tableView从下方开始的效果 */

    _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(TableHeaderViewHeight, 0, 0, 0);

总结

这种实现方式相对来说比较简单，也好理解，就是多了一个透明的TableHeaderView。有试过直接把fakeTableHeaderView作为tableHeaderView 但是在scrollViewDidScroll方法里面并不能改变坐标的y值，如果有其他好的方式欢迎在下方评论留言。另外有同学用scrollView里面镶嵌了一个tableView的实现方式，这种要注意cell复用问题。有时间再想下这种实现方式。

最后贴上demo https://github.com/Dolphii/DHAlipayHomeDemo