仿京东金融首页滑动效果并添加悬浮

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

京东金融效果.gif

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

根据以上的一个分析，我们尝试去做了下，下面是我们开发完成后的一个样式，比京东金融多了一个功能就是上滑的时候有悬浮效果。

钱街效果.gif

---

到这里我们开始查看实现步骤与代码：

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

9161F280F3388F731C2BAE14AF35CEC5.png

上面这个截图是我这边已经加进去了三个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