最近看到京东商品详情 有一个效果 上啦查看图文详情如图
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];
}];
}
}
实现的比较粗糙 有时间在处理具体效果
