iOSiOS开发iOS技术专题

iOS仿jd详情页面弹性跳转

2016-06-07  本文已影响657人  健健锅

最近看到京东商品详情 有一个效果 上啦查看图文详情如图


CED6023A-0E46-4EF9-9A3E-A1F87E9FE46B.png

实际效果


15s xiaoguo.gif

在页面一 滑到底部是上啦到一定距离 标题会改变 并且页面也会变化. 同样在页面2 时下拉也是同样的结果
分析: 首先页面一是tableview 底部提示文字是在表尾 当偏移量达到一定数值时 让tableview 向上移动 全部移出屏幕,然后在表尾添加显得视图 就是表2 的tableview 叫做footertableview 这是把表一tableview 禁止滑动 这样 footertableview滑动事件就不会冲突 同样当表2 footertableview 向下滑动时 同样道理
创建表1 并且添加尾部视图

- (void)creaeUI{
    //创建页面1 的表 并且在表尾添加提示文字
    
    UITableView * TableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 32, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 64 + 32) style:UITableViewStyleGrouped];
    self.automaticallyAdjustsScrollViewInsets = false;
    TableView.autoresizesSubviews = NO;
    TableView.delegate = self;
    TableView.dataSource = self;
    TableView.pagingEnabled = NO;
    self.tableview = TableView;
    TableView.backgroundColor = [UIColor grayColor];
    [TableView registerNib:[UINib nibWithNibName:@"myTableViewCell" bundle:nil] forCellReuseIdentifier:@"aaa"];
    [self.view addSubview: TableView];
    //添加表尾
    [self addfootertext];
}
- (void)addfootertext{
    //页面一的表尾添加文字
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0,  [UIScreen mainScreen].bounds.size.width, 30)];
    label.textAlignment = 1;
    label.text = @"^上啦加载标题2页面";
    self.tableview.tableFooterView = label;
}

当表一 向上滑动时 偏移量超过一定值是 表1 移出[屏幕 并且在表一尾 添加表二的视图

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //当表一 向上滑动时  偏移量超过一定值是 表1 移出[屏幕   并且在表一尾 添加表二的视图
    if(self.tableview.contentOffset.y > self.tableview.contentSize.height - [UIScreen mainScreen].bounds.size.height  + 150){
        
        [UIView animateWithDuration:0.5 animations:^{
            self.tableview.contentOffset = CGPointMake(0, self.tableview.contentSize.height );
           
        } completion:^(BOOL finished) {
          //  添加表二的视图

                       [self addtableviewfooter];
        }];
    }
    
    //当表2向下滑动  时 改变表头的文字   当>200 是 添加
    if (self.FooterTableview.contentOffset.y < -200) {
        
        self.footerTabHanderLabel.text = @"返回中......";
    }else if(self.FooterTableview.contentOffset.y < -50 && self.FooterTableview.contentOffset.y >= -200 ) {
        
        self.footerTabHanderLabel.text = @"松开回到上部页面";
    }else{
        
        [self footerTabHeaderView];
        
    }
}

- (void)footerTabHeaderView{
    
    UILabel * handerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 50)];
    handerLabel.text = @"下拉返回详情";
    self.footerTabHanderLabel = handerLabel;
    handerLabel.textAlignment = 1;
    self.FooterTableview.tableHeaderView = handerLabel;
}

页面2 滑动结束返回页面一

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    NSLog(@"aaa = %f",self.FooterTableview.contentOffset.y);
    if (self.FooterTableview.contentOffset.y < -200) {
        self.tableview.scrollEnabled = YES;
        [UIView animateWithDuration:0.5 animations:^{
            self.tableview.contentOffset = CGPointMake(0, [UIScreen mainScreen].bounds.size.height + 100 );
        } completion:^(BOOL finished) {
            self.navigationItem.title = @"标题一页面";
            [self addfootertext];
        }];
    }
    
 }

实现的比较粗糙 有时间在处理具体效果

上一篇 下一篇

猜你喜欢

热点阅读