<i id='3h5xb'><div id='3h5xb'><ins id='3h5xb'></ins></div></i>
  • <tr id='3h5xb'><strong id='3h5xb'></strong><small id='3h5xb'></small><button id='3h5xb'></button><li id='3h5xb'><noscript id='3h5xb'><big id='3h5xb'></big><dt id='3h5xb'></dt></noscript></li></tr><ol id='3h5xb'><table id='3h5xb'><blockquote id='3h5xb'><tbody id='3h5xb'></tbody></blockquote></table></ol><u id='3h5xb'></u><kbd id='3h5xb'><kbd id='3h5xb'></kbd></kbd>
  • <span id='3h5xb'></span>
    <dl id='3h5xb'></dl>
  • <acronym id='3h5xb'><em id='3h5xb'></em><td id='3h5xb'><div id='3h5xb'></div></td></acronym><address id='3h5xb'><big id='3h5xb'><big id='3h5xb'></big><legend id='3h5xb'></legend></big></address>

    <i id='3h5xb'></i>
    <fieldset id='3h5xb'></fieldset>

          <code id='3h5xb'><strong id='3h5xb'></strong></code>

          <ins id='3h5xb'></ins>
          1. 仿京东金融首页滑动效果并添加悬浮

            • 时间:
            • 浏览:22
            • 来源:124软件资讯网

              最近在做的一个项目中需要用到京东金融首页滑动卡片双方留白的效果 ,以是针对这个效果研究探索了一下  。京东金融这个效果从直观视觉来看可能较为简朴  ,但仔细看的话不难看出每张卡片双方 都有上一个或者下一个卡片的边框  。那么针对这样的效果应该怎样去剖析和制作 。我们先来看看京东金融的首页实现效果:

              京东金融效果.gif


              通过上面的gif图仔细看的话我们可以看出京东那里做的是一个联动效果  ,卡片View和下面的ScrollView有一个联动的效果 ,以是下面横滑TabbleView的时间可以显着看出下面的滑动会稍微快些  。

              凭据以上的一个剖析  ,我们实验去做了下  ,下面是我们开发完成后的一个样式 ,比京东金融多了一个功效就是上滑的时间有悬浮效果 。

              钱街效果.gif

              到这里我们最先检察实现步骤与代码:

              1.以上已经说明这个效果实现是做的联动 。以是我们一定是需要两个ScrollView 。这里暂时叫 topScrollView 与 bottomScrollView;而且这里我们可以界说bottomScorllView上的ControllView;我们写好之后大致是这样的一个样式:

              上面这个截图是我这边已经加进去了三个VC和TopScrollView上面的卡片 。接下来我们要先做左右滑动时的一个联动效果 。

              2.联动效果实现

              (1)我们要实现联动就一定要先实现ScrollView的滑动署理

              #pragma mark - UIScrollViewDelegate
              - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
              {
                  [[NSNotificationCenter defaultCenter] postNotificationName:kYJHomeNavTopSliderNotification object:nil];
                  if (scrollView == self.topScrollView)
                  {
                      _witchScrollView = 1;
                  }
                  else if (scrollView == self.mainScrollView)
                  {
                      _witchScrollView = 2;
                  }
              }
              - (void)scrollViewDidScroll:(UIScrollView *)scrollView
              {
                  if (scrollView == self.mainScrollView && _witchScrollView == 2)
                  {
                      [self.topScrollView setContentOffset:CGPointMake(scrollView.contentOffset.x * (self.topScrollView.frame.size.width)/(UIScreenWidth), 0)];
                  }
                  
                  if (scrollView == self.topScrollView && _witchScrollView == 1)
                  {
                      [self.mainScrollView setContentOffset:CGPointMake(scrollView.contentOffset.x * (UIScreenWidth/self.topScrollView.frame.size.width), 0)];
                  }
              }
              - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
              {
                  NSInteger currentselegate = 0;
                  if (scrollView == self.mainScrollView && _witchScrollView == 2)
                  {
                     currentselegate  = scrollView.contentOffset.x/scrollView.frame.size.width;
                      self.navTopView.currentIndex = currentselegate; //这里关联btn与Scr
                  }
                  
                  if (scrollView == self.topScrollView && _witchScrollView == 1)
                  {
                     NSInteger currentselegate = (scrollView.contentOffset.x)/(scrollView.frame.size.width - XX_6(10));
                      self.navTopView.currentIndex = currentselegate; //这里关联btn与Scr
                  }
              }

              (2)实在这里在做的时间联动效果很差  ,下面的滑动一半已往了 ,上面的TopScrollview才随着滑动  ,以是网上找了一些资料看了下 ,这里需要盘算  ,就是用屏幕的宽度去除以我们topScrollview的宽度  ,也就是我们卡片View的宽度

              [self.topScrollView setContentOffset:CGPointMake(scrollView.contentOffset.x * (UIScreenWidth/self.topScrollView.frame.size.width), 0)];

              这样我们看到的效果则就是上下滑动是一致的  ,凭据滑动速率 ,下面可能会比上面快一点点 ,可是不会影响  ,联动这里需要注重的则是我们在滑动历程中我们一定要用我们顶部的TopScrollview的宽度去盘算  ,以是我这里topScrollview并不是屏幕的宽度  ,而是居中结构给了300的宽度  。而且这个宽度也是我View的宽度

              3.联动效果实现之后我们需要处置惩罚的是上下滑动时的联动了 。

              (1)上下联动我们应该都知道的  ,tabbleView是属于Scrollview的子类  ,以是可以挪用Scrollview的署理要领,这个TabbleView是添加在BottomScrollview上的VC中的  ,由于我们在bottomScrollview上面添加了三个VC ,也就是对应的三个页面 。

              #pragma mark - TableViewDelegate
              - (void)scrollViewDidScroll:(UIScrollView *)scrollView
              {
                  if ([self.delegate respondsToSelector:@selector(homeLoanTableScrollViewDidScroll:)])
                  {
                      [self.delegate homeLoanTableScrollViewDidScroll:scrollView];
                  }
              }

              (2)这里用署理开到最底层的VC中去  ,实现署理 。

              //首页
              - (void)homeLoanTableScrollViewDidScroll:(UIScrollView *_Nullable)scrollView
              {
                  //这里这样写主要是为了当你下拉的时间保证Tabble不会下拉  ,否则和下面的代码会有冲突  ,发生莫名的发抖
                  if (scrollView.contentOffset.y <= -0.05)
                  {
                      [self.loanVC.tableView.tableView setContentOffset:CGPointMake(0, 0)];
                      return;
                  }
                  //更新顶部topScrollview 的约束 ,我这边是将topScrllview添加到一个底部的TopView上的  ,大小一致 ,开发中也可以添加 。
                  [self.topView mas_updateConstraints:^(MASConstraintMaker *make) {
                      make.top.equalTo(self.contentView).offset(-(scrollView.contentOffset.y));
                  }];
                  [self.contentView updateConstraints];
                 //这两句最重要的两句  ,因为我们在滑动其中任何一个界面的时候其他两个界面也需要跟着滑动的  ,所以我们这边要在1VC中去更改 2、3 VC中的偏移量 。同理后面的也是一样  。
                  [self.creditCardVC.tableView.tableView setContentOffset:CGPointMake(0, fabs(scrollView.contentOffset.y))];
                  [self.speedLoanVC.tableView.tableView setContentOffset:CGPointMake(0, fabs(scrollView.contentOffset.y))];
              }

              4.上下与左右联动都已经实现了  ,那么这里就需要说一下悬浮效果怎样加进去

              (1)悬浮效果许多人都做过 ,可是在京东金融这样的首页效果中怎样加入悬浮 ,这里就需要我们好好思索了  。我这边自身之前有使用过 contentInset 来实现悬浮 。我们需要的悬浮效果则是需要整个页面整体一起上滑 ,到顶部后再去牢固某一个View  。以是其时使用 contentInset 确实是可以实现的  。可是当做到一个VC滑动  ,也要更改另外两个VC偏移量的时间就会泛起种种问题  ,首先通过署理滑动第一个VC中的偏移量  ,那么另外两个VC就要一直的去设置 contentInset 加上一直的去修改VC中顶部需要悬浮的View 。这种做法造成代码臃肿和代码冲突种种问题  。

              解决方案:

              首先我们知道TabbleView自身本就支持Section悬浮  。以是我们就将bottomScrollview设置玉成屏  ,然后topScrollview放置最顶层笼罩在bottom上面即可  ,然后我们vc也是全屏的高度 ,那么TabbleView要空出顶部TopScrollviewde 高度  ,这里我们可以直接使用一个空的Cell空出来即可  。

              这里是朋侪从网上找寻的一个Demo在上面举行了修改并添加悬浮的效果又上传到自己码云上的  。若是有需要则可以拉取代码举行检察  ,不明确的地方可以简书留言 。git地址:https://gitee.com/gzxapp/jindongjinrong

              在这里顺便推荐一篇大神的文章 ,列位可凭据此篇文章举行检察京东金融的详细做法  。https://www.jianshu.com/p/48bec8e86add