GIF演示：
- 前段時間逛淘寶的時候發(fā)現(xiàn)淘寶的商品詳情頁隐锭，上提顯示W(wǎng)ebView頁面萄传，下拉刷新顯示瀏覽記錄商品，于是就想模仿著寫一下,我是利用 MJRefresh 來寫的
真的要感謝 MJRefresh 的作者躺苦，因為利用 MJRefresh 寫會省掉很多代碼活鹰，并且效果也特別好，
其實我寫的這個特別簡單派哲，只能說在一些大神面前獻(xiàn)丑了臼氨，實現(xiàn)淘寶的這個效果，首先要熟悉IOS的視圖布局芭届，了解UITableView储矩、UIScrollView感耙、UIWebView的基礎(chǔ)，然后會使用MJRefresh和IOS動畫即可持隧；
希望各位多多提下意見即硼，或者告訴我一些別的實現(xiàn)方式！謝謝大家
思路分析：
- step1：
設(shè)置一個__ UIScrollView__ 作為視圖底層屡拨，并且設(shè)置分頁為兩頁
- step2：
然后在第一個分頁上添加一個__ UITableView__ 并且設(shè)置表格能夠上提加載（上拉操作即為讓視圖滾動到下一頁）
- step3：
在第二個分頁上添加一個__ UIWebView__ 并且設(shè)置能有下拉刷新操作（下拉操作即為讓視圖滾動到上一頁）
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
//創(chuàng)建導(dǎo)航欄標(biāo)題
self.topTitleView = [[UILabel alloc] init];
self.topTitleView.textAlignment = NSTextAlignmentCenter;
self.topTitleView.text = @"導(dǎo)航欄標(biāo)題-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];
//創(chuàng)建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];
//創(chuàng)建上面的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];
//創(chuàng)建下面的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"]]];
//設(shè)置UITableView 下拉刷新和上提加載
[self.tablePullView addHeaderWithTarget:self action:@selector(tablePullViewHeaderRefrsh)];
[self.tablePullView addFooterWithTarget:self action:@selector(tablePullViewFootRefrsh)];
//設(shè)置UIWebView 下拉操作
[self.webView.scrollView addHeaderWithTarget:self action:@selector(webViewHeaderRefrsh)]只酥；
}
- step4：
實現(xiàn) UITableView 下拉刷新和上提顯示 的方法
//UITableView 下拉頭部刷新方法
-(void)tablePullViewHeaderRefrsh
{
[self.tablePullView headerEndRefreshing];
}
//UITableView 上提刷新方法 顯示W(wǎng)ebView頁面
-(void)tablePullViewFootRefrsh
{
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
self.scrollPullView.contentOffset = CGPointMake(0, IPHONE_H);
} completion:^(BOOL finished) {
//結(jié)束加載
self.topTitleView.text = @"導(dǎo)航欄標(biāo)題-WebView";
[self.tablePullView footerEndRefreshing];
}];
}
- step5：
實現(xiàn) UIWebView 下拉的方法
//WebView 下拉顯示頭部試圖
-(void)webViewHeaderRefrsh
{
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
self.scrollPullView.contentOffset = CGPointMake(0, 0);
} completion:^(BOOL finished) {
//結(jié)束加載
self.topTitleView.text = @"導(dǎo)航欄標(biāo)題-UITableView";
[self.webView.scrollView headerEndRefreshing];
}];
}
源碼下載地址：http://www.code4app.com/thread-10751-1-1.html
圖片發(fā)自簡書App
