1. 程式人生 > >淘寶產品詳情頁 上拉載入圖片詳情 效果實現

淘寶產品詳情頁 上拉載入圖片詳情 效果實現

希望有建議可以一起交流。
不累贅多餘語言,看效果圖:


程式碼如下

#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