淘宝详情是很经典的商品详情模式，今天抽空看了下，以前听别人讲过思路，自己没有亲身实现过，思路很简单：就是在一个父控制器中放入两个子控制器，通过滑动的偏移量去动态改变两个子控制器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写的比较简单，具体情况需要具体分析，如果有更好的方法，欢迎沟通学习
网友评论