模仿淘宝商品详情上提加载显示WebView页面（附Demo源码地址）

GIF演示：

• 前段时间逛淘宝的时候发现淘宝的商品详情页，上提显示WebView页面，下拉刷新显示浏览记录商品，于是就想模仿着写一下,我是利用 MJRefresh 来写的
  真的要感谢 MJRefresh 的作者，因为利用 MJRefresh 写会省掉很多代码，并且效果也特别好，

其实我写的这个特别简单，只能说在一些大神面前献丑了，实现淘宝的这个效果，首先要熟悉IOS的视图布局，了解UITableView、UIScrollView、UIWebView的基础，然后会使用MJRefresh和IOS动画即可；

希望各位多多提下意见，或者告诉我一些别的实现方式！谢谢大家

思路分析：

• step1：
  设置一个__ UIScrollView__ 作为视图底层，并且设置分页为两页

• step2：
  然后在第一个分页上添加一个__ UITableView__ 并且设置表格能够上提加载（上拉操作即为让视图滚动到下一页）

• step3：
  在第二个分页上添加一个__ UIWebView__ 并且设置能有下拉刷新操作（下拉操作即为让视图滚动到上一页）

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    //创建导航栏标题
    self.topTitleView = [[UILabel alloc] init];
    self.topTitleView.textAlignment = NSTextAlignmentCenter;
    self.topTitleView.text = @"导航栏标题-UITableView";
    self.topTitleView.backgroundColor = [UIColor colorWithRed:0.45f green:0.84f blue:1.00f alpha:1.00f];
    self.topTitleView.textColor = [UIColor blackColor];
    self.topTitleView.frame = CGRectMake(0, 0, IPHONE_W, 50);
    [self.view addSubview:self.topTitleView];
    
    //创建scrollPullViewiew
    self.scrollPullView = [[UIScrollView alloc]initWithFrame:CGRectMake(0,50, IPHONE_W, IPHONE_H-50)];
    self.scrollPullView.contentSize = CGSizeMake(IPHONE_W, (IPHONE_H-50) * 2);
    self.scrollPullView.pagingEnabled = YES;
    self.scrollPullView.backgroundColor = [UIColor whiteColor];
    //禁用滚动
    self.scrollPullView.scrollEnabled = NO;
    [self.view addSubview:self.scrollPullView];
    
    //创建上面的TableView
    self.tablePullView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, IPHONE_W, IPHONE_H-50) style:UITableViewStylePlain];
    self.tablePullView.delegate = self;
    self.tablePullView.dataSource = self;
    self.tablePullView.backgroundColor = [UIColor whiteColor];
    [self.scrollPullView addSubview:self.tablePullView];
    
    //创建下面的webView
    self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, IPHONE_H, IPHONE_W, IPHONE_H)];
    self.webView.backgroundColor = [UIColor whiteColor];
    [self.scrollPullView addSubview:self.webView];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
    //设置UITableView 下拉刷新和上提加载
    [self.tablePullView addHeaderWithTarget:self action:@selector(tablePullViewHeaderRefrsh)];
    [self.tablePullView addFooterWithTarget:self action:@selector(tablePullViewFootRefrsh)];
    //设置UIWebView 下拉操作
    [self.webView.scrollView addHeaderWithTarget:self action:@selector(webViewHeaderRefrsh)]；

}

• step4：
  实现 UITableView 下拉刷新和上提显示 的方法

//UITableView 下拉头部刷新方法
-(void)tablePullViewHeaderRefrsh
{
    [self.tablePullView headerEndRefreshing];
}
//UITableView 上提刷新方法 显示WebView页面
-(void)tablePullViewFootRefrsh
{
    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
        self.scrollPullView.contentOffset = CGPointMake(0, IPHONE_H);
    } completion:^(BOOL finished) {
        //结束加载
        self.topTitleView.text = @"导航栏标题-WebView";
        [self.tablePullView footerEndRefreshing];
    }];

}

• step5：
  实现 UIWebView 下拉的方法

//WebView 下拉显示头部试图
-(void)webViewHeaderRefrsh
{
    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
       self.scrollPullView.contentOffset = CGPointMake(0, 0);
    } completion:^(BOOL finished) {
        //结束加载
      self.topTitleView.text = @"导航栏标题-UITableView";
      [self.webView.scrollView headerEndRefreshing];
    }];
    
}

源码下载地址：http://www.code4app.com/thread-10751-1-1.html

图片发自简书App