1. 程式人生 > >iOS 相似淘寶商品詳情查看翻頁效果的實現

iOS 相似淘寶商品詳情查看翻頁效果的實現

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 相似淘寶商品詳情查看翻頁效果的實現