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

Posted jhcelue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

欢迎交流:::::demo 下载:点此 DEMO 下载





以上是关于iOS 相似淘宝商品详情查看翻页效果的实现的主要内容,如果未能解决你的问题,请参考以下文章

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

Android仿淘宝商品详情页

自己定义ViewGroup实现仿淘宝的商品详情页

vue实现淘宝商品详情页属性选择功能

Vue实现仿淘宝商品详情属性选择的功能

仿京东淘宝商品详情页属性选择js效果