类似淘宝详情的实现

淘宝详情是很经典的商品详情模式，今天抽空看了下，以前听别人讲过思路，自己没有亲身实现过，思路很简单：就是在一个父控制器中放入两个子控制器，通过滑动的偏移量去动态改变两个子控制器view的frame(实际上是改变y值)

好了，废话也不多说，下面就开始看一下具体的实现逻辑吧！

ps:我在做的过程中写了两种模式，第一种，上半部分是网页，下半部分是原生。第二种，上半部分是原生，下半部分是网页(淘宝的类似于这一种)

先说第一种，上半部分是网页，下半部分是原生：

1.首先用两个控制器，一个用来控制原生，一个用来控制网页，项目中为了清晰，用了ThirdViewController 和 FourthViewController分别来作为网页和原生的控制器，在这两个控制器中主要的是滚动方法里面触发改变frame

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat offset = scrollView.contentOffset.y;
    NSLog(@"offset ======= %.1f",offset);
    if (offset > self.webView.scrollView.contentSize.height - 500) {
        if (self.hideDetail) {
            self.hideDetail();
        }
    }
}

要拿到网页的高度，根据偏移量和高度的关系去确定触发时机，网页高度的获取可以到获取网页高度中进行查看，或者直接用demo中的方式
触发block块之后，在父控制器中进行子控制器view frame的改变

__weak typeof(self) weakSelf = self;    
    self.thirdVc.hideDetail = ^ {
        [UIView animateWithDuration:0.5 animations:^{
            weakSelf.thirdVc.view.frame = CGRectMake(0, - weakSelf.view.frame.size.height, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
            weakSelf.fourthVc.view.frame = CGRectMake(0, 0, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
            
        } completion:^(BOOL finished) {
            
        }];
    };

2.同样的，在原生控制器中也是如此

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat offset = scrollView.contentOffset.y;
    NSLog(@"offset == %.1f",offset);
    if (offset < -100) {
        if (self.ShowDetail) {
            self.ShowDetail();
        }
    }
}

__weak typeof(self) weakSelf = self;
    self.fourthVc.ShowDetail = ^ {
        [UIView animateWithDuration:0.5 animations:^{
            weakSelf.thirdVc.view.frame = CGRectMake(0, 0, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
            weakSelf.fourthVc.view.frame = CGRectMake(0, weakSelf.view.frame.size.height, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
            
        } completion:^(BOOL finished) {
            
        }];
    };

demo中的细节点没有调整，具体的用到时候根据自己的情况进行微调即可

下面看类似淘宝的情况

1. 原生控制器及其frame改变

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGFloat offset = scrollView.contentOffset.y;
    NSLog(@"offset == %.1f",offset);
    if (offset> 250) {
        if (self.ShowDetail) {
            self.ShowDetail();
        }
    }
}


    __weak typeof(self) weakSelf = self;
    self.firstVc.ShowDetail = ^ {
        [UIView animateWithDuration:0.5 animations:^{
            weakSelf.firstVc.view.frame = CGRectMake(0, - weakSelf.view.frame.size.height, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
            weakSelf.secondVc.view.frame = CGRectMake(0, 0, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
            
        } completion:^(BOOL finished) {
            
        }];
    };

2. 网页控制器及其frame

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

   CGFloat offset = scrollView.contentOffset.y;
   if (offset < -100) {
       if (self.hideDetail) {
           self.hideDetail();
       }
   }
}

__weak typeof(self) weakSelf = self;    
   self.secondVc.hideDetail = ^ {
       [UIView animateWithDuration:0.5 animations:^{
           weakSelf.firstVc.view.frame = CGRectMake(0, 0, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
           weakSelf.secondVc.view.frame = CGRectMake(0, weakSelf.view.frame.size.height, weakSelf.view.frame.size.width, weakSelf.view.frame.size.height);
           
       } completion:^(BOOL finished) {
           
       }];
   };

ps:具体也就这些,demo写的比较简单，具体情况需要具体分析，如果有更好的方法，欢迎沟通学习

demo下载地址