今天在和小伙伴在看一功能时，发现某个效果图很类似 淘宝的一个滑动，于是好奇的看了下淘宝和天猫的，先上效果图：

淘宝的滑动

天猫的滑动

之前觉的用 ViewController 应该更合适些，但细细看了上述两个效果后，觉的此处是用 View 的。
回来后很想尝试实现下，并注意 天猫 和 淘宝的效果图是有一点点不一样的。

• 通过 View 尝试 （感觉淘宝是 View 做的）
• 通过 ViewController 尝试 （感觉天猫是 ViewController 做的）

一、通过View 显示大致效果

View Detail And More

核心代码：

#import "ViewController.h"
#import "MJRefresh.h"

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define NAV_HEIGHT 64.0f
#define MOREVIEW_HEIGHT 40.0f

@interface ViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *upScrollerView;
@property (nonatomic, strong) UILabel *showMoreLabel;
@property (nonatomic, strong) UIScrollView *downScrollerView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.edgesForExtendedLayout = UIRectEdgeNone;
    [self addAndLayoutView];
    [self setUpRefreshShowUpView];
}

#pragma mark - Method
- (void)setUpRefreshShowUpView {
    // 稍微修改下 下拉的提示文字
    self.downScrollerView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self.downScrollerView.mj_header endRefreshing];
            [UIView animateWithDuration:0.3 animations:^{
                self.downScrollerView.frame = [self downViewFrame];
                self.upScrollerView.frame = [self normalViewFrame];
            }];
        });
    }];
}

#pragma mark - Private Method
// 直接 用 Frame 好了，先不添加 Masonry 库
- (CGRect)upViewFrame {
    return CGRectMake(0, -SCREEN_HEIGHT - NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT);
}
- (CGRect)normalViewFrame {
    return CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT);
}

- (CGRect)downViewFrame {
    return CGRectMake(0, SCREEN_HEIGHT - NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT);
}

#pragma mark - Delegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView.contentOffset.y > MOREVIEW_HEIGHT + NAV_HEIGHT) {
        [UIView animateWithDuration:0.3 animations:^{
            self.upScrollerView.frame = [self upViewFrame];
            self.downScrollerView.frame = [self normalViewFrame];
        }];
    }
}

#pragma mark - InitViewAndLayout
- (void)addAndLayoutView {
    self.view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:self.upScrollerView];
    [self.upScrollerView addSubview:self.showMoreLabel];
    [self.view addSubview:self.downScrollerView];
}

#pragma mark - Getter
- (UIScrollView *)upScrollerView {
    if (!_upScrollerView) {
        _upScrollerView = [[UIScrollView alloc] initWithFrame:[self normalViewFrame]];
        _upScrollerView.delegate = self;
        _upScrollerView.backgroundColor = [UIColor redColor];
        _upScrollerView.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT);
    }
    return _upScrollerView;
}

- (UILabel *)showMoreLabel {
    if (!_showMoreLabel) {
        _showMoreLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, SCREEN_HEIGHT - MOREVIEW_HEIGHT , SCREEN_WIDTH, MOREVIEW_HEIGHT)];
        _showMoreLabel.text = @"--上拉，显示更多--";
        _showMoreLabel.font = [UIFont systemFontOfSize:14];
        _showMoreLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _showMoreLabel;
}

- (UIScrollView *)downScrollerView {
    if (!_downScrollerView) {
        _downScrollerView = [[UIScrollView alloc] initWithFrame:[self downViewFrame]];
        _downScrollerView.backgroundColor = [UIColor greenColor];
        _downScrollerView.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT);
    }
    return _downScrollerView;
}

@end

二、通过ViewController 显示大致效果

VC More

核心代码：

#import "DetailViewController.h"
#import "SubMoreViewController.h"
#import "SubDetailViewController.h"

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define NAV_HEIGHT 64.0f
#define BOATTOM_VIEW_HEIGHT 40.0f

@interface DetailViewController ()

@property (nonatomic, strong) UIView *showDetailOrMoreView;
@property (nonatomic, strong) UIButton *addToCartButton;
@property (nonatomic, strong) SubMoreViewController *subMoreViewController;
@property (nonatomic, strong) SubDetailViewController *subDetailViewController;
@property (nonatomic, strong) UIViewController *currentViewController;

@end

@implementation DetailViewController

#pragma mark - Life Cycle
- (void)viewDidLoad {
    [super viewDidLoad];
    // View
    self.title = @"Detail";
    [self.view addSubview:self.showDetailOrMoreView];
    [self.view addSubview:self.addToCartButton];
    // Main ACtion
    [self setUpMainEvent];
}

#pragma mark - Private Method
- (void)setUpMainEvent {
    // 转场处的处理
    [self addChildViewController:self.subDetailViewController];
    [self addChildViewController:self.subMoreViewController];
    
    // 显示的 View
    [self.showDetailOrMoreView addSubview:self.subDetailViewController.view];
    self.currentViewController = self.subDetailViewController;
    
    // 向上拉的显示 More 和 向下啦显示 Deatail
    __weak typeof(self) weakSelf = self;
    self.subDetailViewController.showMoreVCBlock = ^{
        __strong typeof(self) strongSelf = weakSelf;
        strongSelf.title = @"More";
        [strongSelf replaceController:strongSelf.currentViewController newController:strongSelf.subMoreViewController];
    };
    
    self.subMoreViewController.showDetailVCBlock = ^{
        __strong typeof(self) strongSelf = weakSelf;
        strongSelf.title = @"Detail";
        [strongSelf replaceController:strongSelf.currentViewController newController:strongSelf.subDetailViewController];
    };
}

- (void)replaceController:(UIViewController *)oldController newController:(UIViewController *)newController {
    
    [self addChildViewController:newController];
    [self transitionFromViewController:oldController toViewController:newController duration:0.6 options:UIViewAnimationOptionTransitionNone  animations:nil completion:^(BOOL finished) {
        if (finished) {
            [newController didMoveToParentViewController:self];
            [oldController willMoveToParentViewController:nil];
            [oldController removeFromParentViewController];
            self.currentViewController = newController;
        }else{
            self.currentViewController = oldController;
        }
    }];
}

- (void)addToCartAction {
    NSLog(@"Click Add To Cart");
}

#pragma mark - Getter
- (SubMoreViewController *)subMoreViewController {
    if (!_subMoreViewController) {
        _subMoreViewController  = [[SubMoreViewController alloc] init];
        [_subMoreViewController.view setFrame:CGRectMake(0,0, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT -BOATTOM_VIEW_HEIGHT)];
    }
    return _subMoreViewController;
}

- (SubDetailViewController *)subDetailViewController {
    if (!_subDetailViewController) {
        _subDetailViewController  = [[SubDetailViewController alloc] init];
        [_subDetailViewController.view setFrame:CGRectMake(0,0, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT -BOATTOM_VIEW_HEIGHT)];
    }
    return _subDetailViewController;
}

- (UIView *)showDetailOrMoreView {
    if (!_showDetailOrMoreView) {
        _showDetailOrMoreView = [[UIView alloc] initWithFrame:CGRectMake(0,NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT -BOATTOM_VIEW_HEIGHT)];
        _showDetailOrMoreView.backgroundColor = [UIColor grayColor];
    }
    return _showDetailOrMoreView;
}

- (UIButton *)addToCartButton {
    if (!_addToCartButton) {
        _addToCartButton = [UIButton buttonWithType:UIButtonTypeCustom];
        _addToCartButton.frame = CGRectMake(0, SCREEN_HEIGHT -BOATTOM_VIEW_HEIGHT, SCREEN_WIDTH, BOATTOM_VIEW_HEIGHT);
        [_addToCartButton setTitle:@"Add To Cart" forState:UIControlStateNormal];
        [_addToCartButton setBackgroundColor:[UIColor orangeColor]];
        [_addToCartButton addTarget:self action:@selector(addToCartAction) forControlEvents:UIControlEventTouchUpInside];
    }
    return _addToCartButton;
}

@end

总的来说，以上是大致实现了效果，View 和 ViewController 各有其优缺点，可以根据自己的需求来定，建议用ViewController的吧。
当然有很多细节可以挖掘，例如用 ViewController 的时候那个滑动的效果，系统的默认几种并不符合，如果需要效果更好一点需要自定义的。