仿淘宝上拉进入详情页交互的实现

   <p><strong>前言</strong></p>    <p>项目某个新需求的交互要求仿照淘宝上拉从下网上弹出宝贝详情。今天打开淘宝APP仔细看了看，然后自己写了写，现在感觉效果差不多了，记录一下。</p>    <h2><strong>分析</strong></h2>    <p>可以看到，该页面是分为两部分的，一部分是一开始就能看到的商品信息，然后我们上拉屏幕，屏幕不断往上滚动，滚动到第一部分结束时可以看到底部有“继续拖动，查看图文详情”一行文本出现。继续上拉到一个临界点便触发了翻页，此时第二部分以动画的形式从底部涌出占满整个屏幕。而且效果是该页面整体上移了，即第一部分和第二部分都是上移的。</p>    <p>此时，第二部分占满着整个屏幕，若我们下拉屏幕，则在屏幕顶部淡出“下拉，返回宝贝详情”的文本提示，并且达到一个临界值后文本变为“释放，返回宝贝详情”，此时松开手指，页面又滚动到第一部分的尾部。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/89210de2788c542dcb78b2d1e8b17b49.gif"></p>    <h2><strong>实现</strong></h2>    <p>在自己写的demo中，第一部分是个tableView，展示商品基本信息。第二部分是个webView，展示商品图文详情。</p>    <p>第一步首先加载需要的视图。主要是第一部分的tableView和第二部分的webView，还有第二部分顶部显示上拉返回文本提示的headLab。为了节省资源，其实可以在上拉触发时再加载第二部分视图的，但是这里仅作示例，所以并没有懒加载。</p>    <pre>  <code class="language-objectivec">- (void)loadContentView  {      // first view      [self.contentViewaddSubview:self.tableView];         // second view      [self.contentViewaddSubview:self.webView];         UILabel *hv = self.headLab;      // headLab      [self.webViewaddSubview:hv];      [self.headLabbringSubviewToFront:self.contentView];  }        - (UILabel *)headLab  {      if(!_headLab){          _headLab = [[UILabelalloc] init];          _headLab.text = @"上拉，返回详情";          _headLab.textAlignment = NSTextAlignmentCenter;          _headLab.font = FONT(13);         }         _headLab.frame = CGRectMake(0, 0, PDWidth_mainScreen, 40.f);      _headLab.alpha = 0.f;      _headLab.textColor = PDColor_button_Gray;            return _headLab;  }        - (UITableView *)tableView  {      if(!_tableView){          _tableView = [[UITableViewalloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, self.contentView.bounds.size.height) style:UITableViewStylePlain];          //    _tableView.contentSize = CGSizeMake(PDWidth_mainScreen, 800);          _tableView.dataSource = self;          _tableView.delegate = self;          _tableView.rowHeight = 40.f;          UILabel *tabFootLab = [[UILabelalloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, 60)];          tabFootLab.text = @"继续拖动，查看图文详情";          tabFootLab.font = FONT(13);          tabFootLab.textAlignment = NSTextAlignmentCenter;  //        tabFootLab.backgroundColor = PDColor_Orange;          _tableView.tableFooterView = tabFootLab;      }         return _tableView;  }        - (UIWebView *)webView  {      if(!_webView){          _webView = [[UIWebViewalloc] initWithFrame:CGRectMake(0, _tableView.contentSize.height, PDWidth_mainScreen, PDHeight_mainScreen)];          _webView.delegate = self;          _webView.scrollView.delegate = self;          [_webViewloadRequest:[NSURLRequestrequestWithURL:[NSURLURLWithString:@"https://www.baidu.com"]]];      }         return _webView;  }  </code></pre>    <p>然后实现滚动视图 UIScrollView 的代理方法，在里面完成滚动到达临界值后，触发翻页动画的处理。包括了上拉翻到第二页和下拉翻回第一页两部分，即要在该方法里通过判断scrollView的类型做相应的处理。</p>    <pre>  <code class="language-objectivec">#pragma mark ---- scrollView delegate     -(void)scrollViewDidEndDragging:(UIScrollView *)scrollViewwillDecelerate:(BOOL)decelerate  {      CGFloatoffsetY = scrollView.contentOffset.y;         if([scrollViewisKindOfClass:[UITableViewclass]]) // tableView界面上的滚动      {          // 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度          CGFloatvalueNum = _tableView.contentSize.height -PDHeight_mainScreen;          if ((offsetY - valueNum) > _maxContentOffSet_Y)          {              [self goToDetailAnimation]; // 进入图文详情的动画          }      }         else // webView页面上的滚动      {          NSLog(@"-----webView-------");          if(offsetY_maxContentOffSet_Y)          {              [self backToFirstPageAnimation]; // 返回基本详情界面的动画          }      }  }  </code></pre>    <p>再看看两个翻页的动画，其实很简单，就是移动它们的位置。</p>    <p> </p>    <p>来自：http://ios.jobbole.com/90666/</p>    <p> </p>