转：：iOS 仿淘宝,上拉进入详情页面

Posted 2020-09-20 红凉梦

今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的

 

  1 //
  2 //  ViewController.m
  3 //  仿淘宝,上拉进入详情
  4 //
  5 //  Created by Amydom on 16/11/22.
  6 //  Copyright ? 2016年 Amydom. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 
 11 @interface ViewController ()<UITableViewDelegate , UITableViewDataSource , UIScrollViewDelegate , UIWebViewDelegate>
 12 
 13 
 14 @property (nonatomic , strong)UITableView *tableView;
 15 
 16 @property (nonatomic , strong)UIWebView *webView;
 17 
 18 @property (nonnull , strong)UILabel *headLab;
 19 
 20 
 21 
 22 @end
 23 
 24 @implementation ViewController
 25 
 26 - (void)viewDidLoad {
 27     [super viewDidLoad];
 28     self.view.backgroundColor = [UIColor whiteColor];
 29     
 30     [self createView];
 31     
 32     
 33 }
 34 
 35 - (void)createView{
 36     
 37     _tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
 38     _tableView.delegate = self;
 39     _tableView.dataSource = self;
 40     _tableView.rowHeight = 60.f;
 41     [self.view addSubview:_tableView];
 42     [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
 43     
 44     UILabel *footLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 60)];
 45     footLabel.text = @"继续拖动，查看图文详情";
 46     footLabel.font = [UIFont systemFontOfSize:13];
 47     footLabel.textAlignment = NSTextAlignmentCenter;
 48     _tableView.tableFooterView = footLabel;
 49     //注意:懒加载时,只有用 self 才能调其 getter 方法
 50       [self.view addSubview:self.webView];
 51     _headLab = [[UILabel alloc] init];
 52     _headLab.text = @"上拉，返回详情";
 53     _headLab.textAlignment = NSTextAlignmentCenter;
 54     _headLab.font = [UIFont systemFontOfSize:13];
 55     _headLab.frame = CGRectMake(0, 0, self.view.frame.size.width, 40.f);
 56     _headLab.alpha = 0.f;
 57     _headLab.textColor = [UIColor blackColor];
 58     [_webView addSubview:_headLab];
 59     
 60    [ _webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
 61     
 62     
 63 }
 64 
 65 //懒加载 webView 增加流畅度
 66 - (UIWebView *)webView{
 67     
 68     //注意,这里不用 self 防止循环引用
 69     if (!_webView) {
 70         _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height)];
 71         _webView.delegate = self;
 72         _webView.delegate = self;
 73         _webView.scrollView.delegate = self;
 74         
 75         [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
 76     }
 77     
 78     return _webView;
 79     
 80 }
 81 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
 82     
 83     return 15;
 84     
 85 }
 86 
 87 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 88     
 89     static NSString *indetifier = @"cell";
 90     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:indetifier];
 91     cell.textLabel.text = @"Amydom";
 92     
 93     return cell;
 94  
 95     
 96 }
 97 
 98 //监测 scroll 的偏移量
 99 -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
100 {
101     CGFloat offsetY = scrollView.contentOffset.y;
102     
103     if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滚动
104     {
105         // 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度
106         CGFloat valueNum = _tableView.contentSize.height - self.view.frame.size.height;
107         if ((offsetY - valueNum) > 40)
108         {
109           
110            [self goToDetailAnimation]; // 进入图文详情的动画
111         }
112     }
113     
114     else // webView页面上的滚动
115     {
116         if(offsetY < 0 && -offsetY > 40)
117         {
118             [self backToFirstPageAnimation]; // 返回基本详情界面的动画
119         }
120     }
121 }
122 
123 // 进入详情的动画
124 - (void)goToDetailAnimation
125 {
126     [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
127         _webView.frame = CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height);
128         _tableView.frame = CGRectMake(0, -self.view.frame.size.height , self.view.frame.size.width, self.view.frame.size.height);
129     } completion:^(BOOL finished) {
130         
131     }];
132 }
133 
134 
135 // 返回第一个界面的动画
136 - (void)backToFirstPageAnimation
137 {
138     [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
139         _tableView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.bounds.size.height);
140         _webView.frame = CGRectMake(0, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height);
141         
142     } completion:^(BOOL finished) {
143         
144     }];
145 }
146 
147 // KVO观察
148 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
149     
150     
151     if(object == _webView.scrollView && [keyPath isEqualToString:@"contentOffset"])
152     {
153         [self headLabAnimation:[change[@"new"] CGPointValue].y];
154     }else
155     {
156         [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
157     }
158 }
159 
160 
161 
162 
163 // 头部提示文本动画
164 - (void)headLabAnimation:(CGFloat)offsetY
165 {
166     _headLab.alpha = -offsetY/60;
167     _headLab.center = CGPointMake(self.view.frame.size.width/2, -offsetY/2.f);
168     // 图标翻转，表示已超过临界值，松手就会返回上页
169     if(-offsetY > 40){
170         _headLab.textColor = [UIColor redColor];
171         _headLab.text = @"释放，返回详情";
172     }else{
173         _headLab.textColor = [UIColor blackColor];
174         _headLab.text = @"上拉，返回详情";
175     }
176 }
177 - (void)didReceiveMemoryWarning {
178     [super didReceiveMemoryWarning];
179     // Dispose of any resources that can be recreated.
180 }
181 
182 
183 @end