iOS 相似淘宝商品详情查看翻页效果的实现

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

基本思路：

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