zoukankan      html  css  js  c++  java
  • 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 下载

  • 相关阅读:
    h5 与原生 app 交互的原理
    软件公司各种角色透视图
    软件公司各种角色透视图
    软件公司各种角色透视图
    3大原则让你的编程之路越走越顺
    LeetCode[39]: 组合总和
    20190826
    Oracle介绍
    Welcome to Giyber Blog
    清醒
  • 原文地址:https://www.cnblogs.com/jhcelue/p/7202140.html
Copyright © 2011-2022 走看看