需求:模仿淘寶下拉出現(xiàn)商品詳情頁.有彈簧效果,先View 一下最終效果 Demo
viewShopDetail.gif
核心思路
1、設(shè)置一個 UIScrollView 作為視圖底層，并且設(shè)置分頁為兩頁
2、然后在第一個分頁上添加一個 UITableView 并且設(shè)置表格能夠上提加載（上拉操作即為讓視圖滾動到下一頁）
3、 在第二個分頁上添加一個 WkWebView 并且設(shè)置能有下拉刷新操作（下拉操作即為讓視圖滾動到上一頁）
ps：以上所提及UITableView與UIWebView 可以自行更改為其他滾動控件也是可行的
實現(xiàn)需要的第三方支持：MJRefresh (也可以不用)
代碼實現(xiàn)
1.設(shè)置scrollView作為底部視圖
self.contentView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, ScreenW, (ScreenH-64))];
// 設(shè)置contentSize 內(nèi)容
self.contentView.contentSize = CGSizeMake(ScreenW, (ScreenH-64)*2);
self.contentView.pagingEnabled = YES;
self.contentView.scrollEnabled = NO;
// 將scrollView 作為底部視圖
[self.view addSubview:self.contentView];
2.設(shè)置tableView作為scrollView的子控件,并設(shè)置frame
// 設(shè)置tableView作為scrollView的子控件,并設(shè)置tableView的frame
self.tabV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, ScreenH-64) style:UITableViewStylePlain];
self.tabV.backgroundColor = [UIColor colorWithRed:240/255.0 green:240/255.0 blue:240/255.0 alpha:1];
self.tabV.delegate = self;
self.tabV.dataSource = self;
// 設(shè)置 tableFooterView 的指示 view 繼續(xù)拖動查看更多信息
self.tabV.tableFooterView = self.indicateView;
[self.contentView addSubview:self.tabV];
3 設(shè)置webView作為scrollView的子控件,并設(shè)置frame
self.webV = [[WKWebView alloc] initWithFrame:CGRectMake(0, ScreenH-64, ScreenW, ScreenH-64)];
self.webV.scrollView.delegate = self;
[self.contentView addSubview:_webV];
4.給webview 設(shè)置Header
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
//下拉執(zhí)行對應(yīng)的操作
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
self.contentView.contentOffset = CGPointMake(0, 0);
} completion:^(BOOL finished) {
//結(jié)束加載
[self.webV.scrollView.mj_header endRefreshing];
}];
}];
[header setTitle:@"繼續(xù)拖動回到頂部" forState:MJRefreshStateIdle];
[header setTitle:@"松手回到頂部" forState:MJRefreshStatePulling];
[header setTitle:@"準(zhǔn)備回到頂部" forState:MJRefreshStateRefreshing];
header.lastUpdatedTimeLabel.hidden = YES;
header.arrowView.hidden = YES;
self.webV.scrollView.mj_header = header;
5.在- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate 給監(jiān)聽tableView的滾動,當(dāng)滾動到最大的contentOffset的時候 設(shè)置底部scrollView 滾動到下一頁
根據(jù)自己的需求選擇怎么樣做過度動畫
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat contentHeight = scrollView.contentSize.height;
CGFloat maxOffset = contentHeight - scrollView.bounds.size.height;
if (scrollView == self.tabV) {
if (offsetY+10 > maxOffset ) {
[UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.55 initialSpringVelocity:1.0/0.55 options:0 animations:^{
scrollView.contentOffset = CGPointMake(0, offsetY+10);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5 animations:^{
self.contentView.contentOffset = CGPointMake(0, ScreenH-64);
}];
}];
[UIView animateWithDuration:0.9 animations:^{
}completion:^(BOOL finished) {
}];
}
}
}
