iOS 相似淘寶商品詳情查看翻頁效果的實現
阿新 • • 發佈:2017-07-18
nim anim bool with animate resource tlab 更改 tro
基本思路:
1、設置一個 UIScrollView 作為視圖底層,而且設置分頁為兩頁
2、然後在第一個分頁上加入一個 UITableView 而且設置表格可以上提載入(上拉操作即為讓視圖滾動到下一頁)
3、 在第二個分頁上加入一個 UIWebView 而且設置能有下拉刷新操作(下拉操作即為讓視圖滾動到上一頁)
ps:以上所提及UITableView與UIWebView 可以自行更改為其它滾動控件也是可行的
實現須要的第三方支持:MJRefresh
關於此第三方,可參考:githua 地址 請點擊此處
下面是詳細代碼實現:
定義宏:
#define IPHONE_W ([UIScreen mainScreen].bounds.size.width)
#define IPHONE_H ([UIScreen mainScreen].bounds.size.height)
@interface 部分
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property(strong,nonatomic)UIScrollView *scrollV;
@property(strong,nonatomic)UITableView *tableV;
@property(strong,nonatomic)UIWebView *webV;
@end
@implementation 部分
- (void)viewDidLoad {
[super viewDidLoad];
//控件加入到視圖上
/**
* 設置一個 UIScrollView 作為視圖底層,而且設置分頁為兩頁
* 然後在第一個分頁上加入一個 UITableView 而且設置表格可以上提載入(上拉操作即為讓視圖滾動到下一頁)
在第二個分頁上加入一個 UIWebView 而且設置能有下拉刷新操作(下拉操作即為讓視圖滾動到上一頁)
*/
[self.view addSubview:self.scrollV ];
[self.scrollV addSubview:self.tableV];
[self.scrollV addSubview:self.webV];
//設置UITableView 上拉載入
self.tableV.footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
//上拉。運行相應的操作---改變底層滾動視圖的滾動到相應位置
//設置動畫效果
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
self.scrollV.contentOffset = CGPointMake(0, IPHONE_H);
} completion:^(BOOL finished) {
//結束載入
[self.tableV.footer endRefreshing];
}];
}];
//設置UIWebView 有下拉操作
self.webV.scrollView.header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
//下拉運行相應的操作
self.scrollV.contentOffset = CGPointMake(0, 0);
//結束載入
[self.webV.scrollView.header endRefreshing];
}];
}
-(void)viewWillAppear:(BOOL)animated
{
[self.webV loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
}
#pragma mark -- UITableView DataSource && Delegate
//返回表格分區行數
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 20;
}
//定制單元格內容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
cell.textLabel.text = [NSString stringWithFormat:@"%ld--%ld",indexPath.section,indexPath.row];
return cell;
}
#pragma mark ---- get
-(UIScrollView *)scrollV
{
if (_scrollV == nil)
{
_scrollV = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, IPHONE_W, IPHONE_H)];
_scrollV.contentSize = CGSizeMake(IPHONE_W, IPHONE_H * 2);
//設置分頁效果
_scrollV.pagingEnabled = YES;
//禁用滾動
_scrollV.scrollEnabled = NO;
}
return _scrollV;
}
-(UITableView *)tableV
{
if (_tableV == nil)
{
_tableV = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, IPHONE_W, IPHONE_H) style:UITableViewStylePlain];
_tableV.delegate = self;
_tableV.dataSource = self;
}
return _tableV;
}
-(UIWebView *)webV
{
if (_webV == nil)
{
_webV = [[UIWebView alloc]initWithFrame:CGRectMake(0, IPHONE_H, IPHONE_W, IPHONE_H)];
}
return _webV;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
歡迎交流:::::demo 下載:點此 DEMO 下載
iOS 相似淘寶商品詳情查看翻頁效果的實現