需求背景
電商類App普遍都會(huì)有商品詳情頁面萧锉，大家也普遍都會(huì)找京東淘寶進(jìn)行模仿，大家會(huì)發(fā)現(xiàn)谋作，京東淘寶的第一頁會(huì)有一個(gè)上拉會(huì)展示webview息裸，webview下拉又會(huì)返回上部分的效果。
預(yù)期目的
達(dá)到與京東淘寶類似的上拉下拉效果
image
實(shí)現(xiàn)原理
視圖的層級(jí)結(jié)構(gòu)如下圖
image
核心原理其實(shí)就是當(dāng)tableView上拉或者webView下拉后對(duì)transformView
進(jìn)行偏移岭洲，將其顯示在mainScrollView的contentSize中
具體實(shí)現(xiàn)
//
// JDProductDeViewController.m
// JDProductDetail
//
// Created by 兩根手指敲代碼 on 2018/5/17.
// Copyright ? 2018年 兩根手指敲代碼. All rights reserved.
//
#import "JDProductDeViewController.h"
#import "MJRefresh.h"
#define WS(weakSelf) __weak __block __typeof(&*self)weakSelf = self;
#define kScreenWidth [[UIScreen mainScreen] bounds].size.width
#define kScreenHeight [[UIScreen mainScreen] bounds].size.height
#define IS_iPhoneX (kScreenWidth == 375.f && kScreenHeight == 812.f ? YES : NO)
#define TABBAR_SAFE_BOTTOM_HEIGHT (IS_iPhoneX ? 34.f : 0.f)
#define TABBAR_HEIGHT (TABBAR_SAFE_BOTTOM_HEIGHT + 49.f)
#define STATUSBAR_HEIGHT ([[UIApplication sharedApplication] statusBarFrame].size.height)
#define NAVBAR_HEIGHT (STATUSBAR_HEIGHT+44.f)
#define kEndHeight 80
@interface JDProductDeViewController ()<UIScrollViewDelegate, UITableViewDelegate,UITableViewDataSource>
@property (assign, nonatomic) CGFloat minY;
@property (assign, nonatomic) CGFloat maxY;
@property (assign, nonatomic) BOOL isShowBottom;
@property(nonatomic,strong) UIScrollView *mainScrollView;//最底層橫向scrollview
@property(nonatomic,strong) UIView *transformView;//用來做第一面偏移的view宛逗，是 detailTableView、webView的父視圖
@property(nonatomic,strong) UITableView *detailTableView;//第一面tableview
@property(nonatomic,strong) UIWebView *webView;//第一面webview
@property(nonatomic,strong) UIWebView *scrollWebView;//第二面webview
@property(nonatomic,strong) UILabel *bottomView;//底部菜單
@property(nonatomic,strong)UIPageControl *pageControl;
@end
@implementation JDProductDeViewController
- (void)viewDidLoad {
[super viewDidLoad];
//最底層橫向scrollview
_mainScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, NAVBAR_HEIGHT, kScreenWidth, kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT)];
_mainScrollView.pagingEnabled = YES;
_mainScrollView.backgroundColor = [UIColor whiteColor];
_mainScrollView.delegate = self;
_mainScrollView.contentSize = CGSizeMake(kScreenWidth*3, kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT);
[self.view addSubview:_mainScrollView];
//用來做偏移的view
_transformView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, (kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT) * 2)];
_transformView.backgroundColor = [UIColor grayColor];
[_mainScrollView addSubview:_transformView];
//第一面tableview
_detailTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT)];
_detailTableView.delegate = self;
_detailTableView.dataSource = self;
_detailTableView.backgroundColor = [UIColor magentaColor];
[_transformView addSubview:self.detailTableView];
WS(weakSelf)
_detailTableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
[weakSelf transformToWebview];
}];
//第一面webview
_webView = [[UIWebView alloc] init];
_webView.backgroundColor = [UIColor magentaColor];
_webView.frame = CGRectMake(0, kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT, kScreenWidth, kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT);
_webView.scrollView.delegate = self;
_webView.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
[weakSelf transformToTableview];
}];
[self.transformView addSubview:_webView];
[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.didachuxing.com/static/h5/didahome/index.html"]]];
//底部菜單
_bottomView = [[UILabel alloc] initWithFrame:CGRectMake(0, kScreenHeight - TABBAR_HEIGHT, kScreenWidth, TABBAR_HEIGHT)];
_bottomView.text = @"底部菜單欄(購(gòu)物車盾剩、購(gòu)買)";
_bottomView.textAlignment = NSTextAlignmentCenter;
_bottomView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:_bottomView];
//第二面webview
_scrollWebView = [[UIWebView alloc] init];
_scrollWebView.backgroundColor = [UIColor orangeColor];
_scrollWebView.frame = CGRectMake(kScreenWidth, 0, kScreenWidth, kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT);
_scrollWebView.scrollView.delegate = self;
[_mainScrollView addSubview:_scrollWebView];
[_scrollWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.didachuxing.com/static/h5/didahome/index.html"]]];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 30)];
_pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 200, 120, 30)];
_pageControl.pageIndicatorTintColor = UIColor.greenColor;
_pageControl.numberOfPages = 3;
_pageControl.currentPageIndicatorTintColor = UIColor.orangeColor;
[view addSubview:_pageControl];
self.navigationItem.titleView = _pageControl;
}
#pragma _transformView偏移
- (void)transformToWebview {
[self.detailTableView.mj_footer endRefreshing];
//_transformView向下偏移
[UIView animateWithDuration:0.5 animations:^{
self.transformView.transform = CGAffineTransformTranslate(self.transformView.transform, 0,-(kScreenHeight-NAVBAR_HEIGHT-TABBAR_HEIGHT));
} completion:^(BOOL finished) {
self.mainScrollView.scrollEnabled = NO;
}];
}
- (void)transformToTableview {
[self.webView.scrollView.mj_header endRefreshing];
//_transformView向上偏移
[UIView animateWithDuration:0.5 animations:^{
self.transformView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
self.mainScrollView.scrollEnabled = YES;
}];
}
#pragma tableview代理
- (NSInteger)numberOfSections {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 25;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 40;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [[UITableViewCell alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 50)];
cell.backgroundColor = [UIColor greenColor];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
int page = scrollView.contentOffset.x / kScreenWidth + 0.5;
_pageControl.currentPage = page;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
