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
