iOS支付寶首頁8.11跟新demo

  • 晚上買東西,用支付寶支付時,看到跟新了,手癢就敲了一下。
  • 效果是這樣的,向上滑動時,整個界面一起滑動,上面的視差效果忽略,很多demo的,自己搜就好了。然后是向下滑動時,如果上半部分視圖顯示完畢就不再跟著滑動,而是下面的tableview 在滑動了(這里有貓膩),然后拉出刷新控件,還可以刷新。(當然最好的方法是打開你的支付寶,上下滑動幾下就清楚了)
  • 說完廢話上代碼(核心部分):
  • 主要視圖屬性
@interface ViewController () <UIScrollViewDelegate>
// scrollView 在底部,topView、tableview是他的上下部分子視圖
@property (strong, nonatomic) UIScrollView *rootView;
@property (weak, nonatomic) UIView *topView;
@property (weak, nonatomic) Fg_tableView *tableView;
  • 后面處理視差圖片做了一個調整處理(這不是重點,后6行代碼可以不看)
@implementation ViewController
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
        CGFloat y = scrollView.contentOffset.y;
    if (y <= 0) {
        //這是上半部分視圖顯示完畢后,下拉處理,伴隨scrollView移動,看起來像是沒動
        CGRect newFrame = self.topView.frame;
        newFrame.origin.y = y;
        self.topView.frame = newFrame;
        
        newFrame = self.tableView.frame;
        newFrame.origin.y = y + 310;
        self.tableView.frame = newFrame;
        
        //偏移量給到tableview,tableview自己來滑動
        self.tableView.contentOffsetY = y;
        
        //滑動太快有時候不正確,這里是保護imageView 的frame為正確的。
        newFrame = self.imageView.frame;
        newFrame.origin.y = 0;
        self.imageView.frame = newFrame;
    } else {
        //視差處理
        CGRect newFrame = self.imageView.frame;
        newFrame.origin.y = y/2;
        self.imageView.frame = newFrame;
    }
}
  • 然后是tableview 接收到來自scrollView 的偏移量的處理
-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style {
    
    self = [super initWithFrame:frame style:style];
    
    if (self) {
        self.dataSource = self;
        self.delegate = self;
        //這是根據固定的tableview 高度去計算的 rowheight
        self.rowHeight = (kHeight * 5 - 310) / 20;
        self.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:nil];
    }
    return self;
}

-(void)setContentOffsetY:(CGFloat)contentOffsetY {
    // 這里就轉化成tableview 自己滑動的假象了
    _contentOffsetY = contentOffsetY;
    if (![self.mj_header isRefreshing]) {
        
        self.contentOffset = CGPointMake(0, contentOffsetY);
    }
}

// 這兩個是開放給外部調用刷新,刷新停止的方法
-(void)startRefreshing {
    [self.mj_header beginRefreshing];
}
-(void)endRefreshing {
    [self.mj_header endRefreshing];
}
  • 在這里判斷何時刷新
@implementation ViewController
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    
    // 松手時判斷是否刷新
    CGFloat y = scrollView.contentOffset.y;
    if (y < - 65) {
        [self.tableView startRefreshing];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self.tableView endRefreshing];
        });
    }
}
  • 總結:處理scrollView 的滑動,制造了些假象,細心觀察后發現就是在移動scrollView 時,同時改變子視圖frame,看起來像是沒動,然后把偏移量給到tableview ,然后調這個方法,就轉換成tableview 在滑動了,再在合適的偏移時調刷新控件開始刷新。
self.contentOffset = CGPointMake(0, contentOffsetY);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容