淘寶產品詳情頁 上拉載入圖片詳情 效果實現
阿新 • • 發佈:2019-02-16
希望有建議可以一起交流。
不累贅多餘語言,看效果圖:
程式碼如下
#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