Alipay首页刷新实现
2017-03-17 17:24
113 查看
Alipay 的新版,首页的UI和刷新控件的位置发生了变化。闲暇之余做了个类似的Demo。
2.设置tableView的scrollEnabled为NO,解决滑动冲突
3.监听tableView的contentSize,实时改变scrollView的contentSize
4.在UIScrollView的代理里面实现topView和tableView的frame值
注:下拉刷新控件是本人自己写的。可以替换成任意需要的控件,例如:MJRefresh,在相应的位置修改即可
代码详情:https://github.com/xinyuly/XYAlipayRefreshDemo
刷新控件:https://github.com/xinyuly/XYRefreshTool
实现方式:
UIScrollView + UITableView 。UITableView和一个topView作为UIScrollView的subView
关键点:
1.scrollView的Indicator的显示位置从tableView的位置开始显示_scrollView.scrollIndicatorInsets = UIEdgeInsetsMake(KTopViewHeight, 0, 0, 0);
2.设置tableView的scrollEnabled为NO,解决滑动冲突
_tableView.scrollEnabled = NO;
3.监听tableView的contentSize,实时改变scrollView的contentSize
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context { if ([keyPath isEqualToString:@"contentSize"]) { CGRect tFrame = self.tableView.frame; tFrame.size.height = self.tableView.contentSize.height; self.tableView.frame = tFrame; self.scrollView.contentSize = CGSizeMake(0, self.tableView.contentSize.height+KTopViewHeight); } }
4.在UIScrollView的代理里面实现topView和tableView的frame值
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat offsetY = self.scrollView.contentOffset.y; if (offsetY <= 0.0) { CGRect frame = self.topView.frame; frame.origin.y = offsetY; self.topView.frame = frame; CGRect tFrame = self.tableView.frame; tFrame.origin.y = offsetY + KTopViewHeight; self.tableView.frame = tFrame; if (![self.tableView isRefreshing]) { self.tableView.contentOffset = CGPointMake(0, offsetY); } } else if (offsetY < KTopHeaderViewHeight && offsetY >0) { CGFloat alpha = (offsetY*2/KTopHeaderViewHeight>0) ? offsetY*2/KTopHeaderViewHeight:0; if (alpha > 0.5) { self.navNewView.alpha = alpha*2-1; self.navView.alpha = 0; } else { self.navNewView.alpha = 0; self.navView.alpha = 1-alpha*2; } self.topHeaderView.alpha = 1-alpha; } }
注:下拉刷新控件是本人自己写的。可以替换成任意需要的控件,例如:MJRefresh,在相应的位置修改即可
代码详情:https://github.com/xinyuly/XYAlipayRefreshDemo
刷新控件:https://github.com/xinyuly/XYRefreshTool
相关文章推荐
- jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
- Android 高仿新浪微博底部导航栏,实现双击首页Tab,页面的ListView滚动、刷新
- Map用法(框架顶部实现首页,后退,前进,刷新)
- Android 高仿新浪微博底部导航栏,实现双击首页Tab,页面的ListView滚动、刷新
- 新浪微博项目---首页技术点三.上拉刷新,下拉加载的实现(使用ios自带的小菊花实现)
- Android使用TabHost实现在首页tab再次点击首页tab时,刷新首页数据或者recyclerView回到顶部的需求
- 超简单!原生SwipeRefreshLayout实现首页下拉刷新
- jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
- 源码推荐(11.27B):网易标题栏目功能实现,仿天猫首页刷新效果 导航栏颜色渐变效果
- [原创]将TDC进行到底(2):实现数据的刷新(只刷新表格数据)|并欣赏将TDC和StedyMenu结合的效果
- 一段实现DataGrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新
- 使用动态JavaScript实现多级菜单联动时不刷新页面的方法
- 实现无刷新DropDownList联动效果
- asp.net2.0中使用客户端回调实现无刷新应用!
- 实现无刷新DropDownList联动效果。
- [导入]实现无刷新DropDownList联动效果
- 用XMLTHHP实现DropDownList无刷新联动菜单[联动菜单]
- 实现无刷新DropdownList联动效果[by cuike519]
- ASP.NET实现无刷新的DropdownList联动效果(20041204)
- 如何实现无刷新的DropdownList联动效果