淘宝产品详情页 上拉加载图片详情 效果实现

希望有建议可以一起交流。
不累赘多余语言，看效果图：


代码如下

#import "ViewController.h"#import "UIView+Category.h"#define ViewWidth (self.view.width)         //  屏幕宽度#define ViewHeight (self.view.height-20)    //  屏幕高度【减去的20 为状态栏的高度，如果为全屏显示，就不需要减去20】#define up_down_showLabel_minHeight 30      //  提示Label 的最小高度@interface ViewController () <UIScrollViewDelegate>/** 最外层的ScrollView     这里是在Storyboard中拉取的，设置其布局约束为充满整个屏幕    这里留出了StatusBar的高度，实际留不留取决与设计 */@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;/** 第一页的 ScrollView */@property (nonatomic, strong) UIScrollView * subScrollView;/** 第二页的 WebView */@property (nonatomic, strong) UIWebView * webView;/** 第一页与第二页过渡时 显示的 提示Label */@property (nonatomic, strong) UILabel * up_down_showLabel;@end@implementation ViewController#pragma mark - 懒加载/** 第一页的 ScrollView */- (UIScrollView *)subScrollView {    if (!_subScrollView) {        //  将 subScrollView 放在第一页        _subScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ViewWidth, ViewHeight)];        [_subScrollView setContentSize:CGSizeMake(0, 750)];        [_subScrollView setBackgroundColor:[UIColor blueColor]];        for (int i = 0; i <= 6; i++) {            UIButton * btn = [[UIButton alloc] initWithFrame:CGRectMake(50, 100*i+50, ViewWidth-100, 50)];            [btn setBackgroundColor:[UIColor blackColor]];            btn.layer.cornerRadius = 10;            [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];            [btn setTitle:[NSString stringWithFormat:@"Btn - 0%d", i] forState:UIControlStateNormal];            [_subScrollView addSubview:btn];        }    }    return _subScrollView;}/** 第二页的 WebView */- (UIWebView *)webView {    if (!_webView) {        //  将 webView 放在第二页        _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, ViewHeight, ViewWidth, ViewHeight)];        [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];    }    return _webView;}/** 第一页与第二页过渡时 显示的 提示Label */- (UILabel *)up_down_showLabel {    if (!_up_down_showLabel) {        _up_down_showLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, ViewWidth, up_down_showLabel_minHeight)];        [_up_down_showLabel setBackgroundColor:[UIColor grayColor]];        [_up_down_showLabel setTextColor:[UIColor darkGrayColor]];        [_up_down_showLabel setTextAlignment:NSTextAlignmentCenter];    }    return _up_down_showLabel;}- (void)viewDidLoad {    [super viewDidLoad];        /** 设置最外层 ScrollView 的内容高度 为两页 */    [_scrollView setContentSize:CGSizeMake(0, 2*ViewHeight)];    /** 首先 将第一页的内容添加 */    [_scrollView addSubview:self.subScrollView];}#pragma mark - UIScrollViewDelegate- (void)scrollViewDidScroll:(UIScrollView *)scrollView {    //  往往这样的页面 会有多个ScrollView，所以其设置tag，以示区别    switch (scrollView.tag) {        case 1: {   //  这里 tag 为 1的是最外层的ScrollView            float offsetY = scrollView.contentOffset.y;            if (offsetY>0 && offsetY<ViewHeight*0.5) {                //  这种情况为 第一页已到底部，再向下滑动 就要显示第二页的内容                /** 将 提示Label显示在第一页底部 */                _up_down_showLabel.y = ViewHeight;                [_up_down_showLabel setText:@" -- 上拉呀 -- "];                [_scrollView addSubview:self.up_down_showLabel];                /** 让 提示Label 高度/透明度随滑动位移变化 */                [_up_down_showLabel setAlpha:offsetY*1.0f/50];                _up_down_showLabel.height = offsetY>up_down_showLabel_minHeight ? offsetY : up_down_showLabel_minHeight;            } else if (offsetY>ViewHeight*0.5 && offsetY<ViewHeight) {                //  这种情况为 第而页已到顶部，再向上滑动 就要显示第一页的内容                [_up_down_showLabel setText:@" - 下拉呀 - "];                [_scrollView addSubview:_up_down_showLabel];                /** 让 提示Label 高度/透明度随滑动位移变化 */                [_up_down_showLabel setAlpha:(ViewHeight-offsetY)*1.0f/50];                _up_down_showLabel.height = ViewHeight-offsetY>up_down_showLabel_minHeight ? ViewHeight-offsetY : up_down_showLabel_minHeight;                /** 将 提示Label显示在第二页顶部 */                _up_down_showLabel.y = ViewHeight-_up_down_showLabel.height;            } else if (offsetY == ViewHeight) {                //  滑到 第二页的时候                if (!_webView) {                    /** 如果 webView 还没有加载，就加载并添加到视图中 */                    [_scrollView addSubview:self.webView];                }            } else {                //  其他位置 就移除 提示Label                [_up_down_showLabel removeFromSuperview];            }        } break;    }}@end