iOS开发日记45-类似淘宝商品详情查看翻页效果的实现

今天博主有一个类似淘宝商品详情查看翻页效果的实现的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步.

1.使用第三方框架

我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多

主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情

首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中的delegate方法,

实现delegate代理方法的时候使用

- (void)scrollViewByPageControlPage:(NSInteger)page

{

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.50];

[self.backScrollView setContentOffset:CGPointMake(0, (ScreenHeight-navigationHeight-OffsetHeight)*page)];

[UIView commitAnimations];

}

将scrollView滚动到第二页,以便展示更多详情。

再次,在scrollview的第二页中加入一个View ,在此view上再创建一个ScrollView,这个scrollView实现EGORefreshTableHeaderView的delegate方法

具体如下:

#pragma mark EGORefreshTableHeaderDelegate Methods

- (void)egoRefreshTableHeaderDidTriggerRefresh:(EGORefreshTableHeaderView*)view{

[self reloadTableViewDataSource];

[self performSelector:@selector(doneLoadingTableViewDataForIndex) withObject:nil afterDelay:1.0];

}

- (void)doneLoadingTableViewDataForIndex

{

_reloading = NO;

[_refreshHeaderView egoRefreshScrollViewDataSourceDidFinishedLoading:lectureScrollView];

[_loadMoreFooterView pwLoadMoreTableDataSourceDidFinishedLoading];

[self scrollViewByPageControlPage:0];

}

- (BOOL)egoRefreshTableHeaderDataSourceIsLoading:(EGORefreshTableHeaderView*)view{

return _reloading; // should return if data source model is reloading

}

- (NSDate*)egoRefreshTableHeaderDataSourceLastUpdated:(EGORefreshTableHeaderView*)view{

return [NSDate date]; // should return date data source was last changed

}

一下实现EGORefreshTableHeaderView的delegate方法

此处设置跳转到SCRollView第一页

- (void)doneLoadingTableViewDataForIndex

{

_reloading = NO;

[_refreshHeaderView egoRefreshScrollViewDataSourceDidFinishedLoading:lectureScrollView];

[_loadMoreFooterView pwLoadMoreTableDataSourceDidFinishedLoading];

[self scrollViewByPageControlPage:0];

}

2.使用原生框架

代码贴出来,各位看官自行理解

- (void)viewDidLoad

{

[super viewDidLoad];

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(doPan:)];

[self.view addGestureRecognizer:pan];

pan.enabled = NO;

self.panGesture = pan;

_panGesture.delaysTouchesBegan = YES;

[self.view bringSubviewToFront:_tableView];

// Do any additional setup after loading the view, typically from a nib.

}

- (void)scrollViewDidScroll:(UIScrollView *)aScrollView {

CGPoint offset = aScrollView.contentOffset;

CGRect bounds = aScrollView.bounds;

CGSize size = aScrollView.contentSize;

UIEdgeInsets inset = aScrollView.contentInset;

float y = offset.y + bounds.size.height - inset.bottom;

float h = size.height;

float reload_distance = 30;

if(y > h + reload_distance) {

NSLog(@"load more rows");

_panGesture.enabled = YES;//一个拖动手势

self.tableView.scrollEnabled = NO;

_isCurrentOnScreen = YES;

}

}

- (void)doPan:(UIPanGestureRecognizer *)pan

{

if(pan.state == UIGestureRecognizerStateBegan)

{

self.beginPoint = [pan locationInView:self.view];

//        self.beginPoint=[pan locationInView:self.view];

}else if (pan.state == UIGestureRecognizerStateChanged)

{

if(_isCurrentOnScreen)

{

CGPoint touchPoint = [self.view convertPoint: [pan locationInView:self.tableView] fromView:_tableView] ;

[self.tableView setFrame:CGRectMake(0, 20 + touchPoint.y - _beginPoint.y, 320, 460)];

}else

{

[self.tableView setFrame:CGRectMake(0, - 480 + [pan locationInView:self.view].y - _beginPoint.y, 320, 460)];

}

}else if (pan.state == UIGestureRecognizerStateEnded)

{

if(_isCurrentOnScreen)

{

CGPoint touchPoint = [self.view convertPoint: [pan locationInView:self.tableView] fromView:_tableView] ;

if(touchPoint.y - _beginPoint.y < -200)

{

[UIView animateWithDuration:0.01 animations:^{

[self.tableView setFrame:CGRectMake(0, - 480, 320, 460)];

}];

_isCurrentOnScreen = NO;

}else

{

[UIView animateWithDuration:0.01 animations:^{

[self.tableView setFrame:CGRectMake(0, 20, 320, 460)];

} completion:^(BOOL finished) {

[self stopPan];

}];

}

}else

{

if([pan locationInView:self.view].y - _beginPoint.y < 200)

{

[UIView animateWithDuration:0.3 animations:^{

[self.tableView setFrame:CGRectMake(0, -480, 320, 460)];

}];

_isCurrentOnScreen = NO;

}else

{

[UIView animateWithDuration:0.3 animations:^{

[self.tableView setFrame:CGRectMake(0, 20, 320, 460)];

} completion:^(BOOL finished) {

[self stopPan];

}];

}

}

[self.view bringSubviewToFront:_tableView];

}

}

- (void)pan:(UIPanGestureRecognizer *)pan

{

NSLog(@"11");

}

- (void)stopPan

{

self.tableView.scrollEnabled = YES;

_panGesture.enabled = NO;

_tableView.panGestureRecognizer.enabled = YES;

}

时间: 2024-10-25 00:47:39

iOS开发日记45-类似淘宝商品详情查看翻页效果的实现的相关文章

iOS 类似淘宝商品详情查看翻页效果的实现

基本思路: 1.设置一个 UIScrollView 作为视图底层,并且设置分页为两页 2.然后在第一个分页上添加一个 UITableView 并且设置表格能够上提加载(上拉操作即为让视图滚动到下一页) 3. 在第二个分页上添加一个 UIWebView 并且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页) ps:以上所提及UITableView与UIWebView 可以自行更改为其他滚动控件也是可行的 实现需要的第三方支持:MJRefresh 关于此第三方,可参考:githua 地址 请点击

iOS 相似淘宝商品详情查看翻页效果的实现

基本思路: 1.设置一个 UIScrollView 作为视图底层,而且设置分页为两页 2.然后在第一个分页上加入一个 UITableView 而且设置表格可以上提载入(上拉操作即为让视图滚动到下一页) 3. 在第二个分页上加入一个 UIWebView 而且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页) ps:以上所提及UITableView与UIWebView 可以自行更改为其它滚动控件也是可行的 实现须要的第三方支持:MJRefresh 关于此第三方,可參考:githua 地址 请点击

ios 类似淘宝商品详情页面的效果

今天试着写ios 类似淘宝商品详情页面的效果 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中的delegate方法, 实现delegate代理方法的时候使用 - (void)s

Beatiful Soup获取淘宝商品详情

Beatiful Soup生成商品详情页面的剖析树, 主要函数:findAll(name=None, attrs={}, recursive=True, text=None, limit=None, **kwargs) 利用findAll先获取标签范围的内容,再利用正则表达式进行匹配输出. Beatiful Soup的中文文档: http://www.crummy.com/software/BeautifulSoup/bs3/documentation.zh.html#Searching%20t

Vue实现仿淘宝商品详情属性选择的功能

Vue实现仿淘宝商品详情属性选择的功能 2018年09月07日 17:13:35 yx_cos 阅读数:278 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrAndValuees: [   {   'attrId': 1,   'attrName': '味道',   'valuees': [   {   'attrId': 1,   'value': '橘子味'   },   {   'a

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

绪论 最近一直比较忙,也没抽出时间来写博客,也不得不说是自己犯了懒癌,人要是一懒就什么事都不想做了,如果不能坚持下来的话,那么估计就废了,??.最近自己攒了好多东西,接下来的时间我会慢慢都分享出来的.好了废话不多说了,下面我们开始正题: 今天要分享的是淘宝的详情页,之前在淘宝上买东西的时候看到淘宝的详情页效果比较不错,所以今天就来仿一下它的效果吧,可能没有淘宝的好,希望见谅啊. 效果图 先上效果图: 这是淘宝的: ? 我自己做的: ? 怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅. 下面

Android开发案例 - 淘宝商品详情【转】

http://erehmi.cnblogs.com/ 所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPager, git: castorflex/VerticalViewPager 手势拦截 & 处理 实现思路 上下分页的设计完全可以用垂直分页来实现, 见知识要点[1] 如果使用垂直分页来实现, 那么问题就来了: 上下分页中的内容肯定是支持垂直滚动的

Android开发案例 - 淘宝商品详情

所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPager, git: castorflex/VerticalViewPager 手势拦截 & 处理 实现思路 上下分页的设计完全可以用垂直分页来实现, 见知识要点[1] 如果使用垂直分页来实现, 那么问题就来了: 上下分页中的内容肯定是支持垂直滚动的, 如此就会和ViewPager的手势冲突, 因此,

android仿京东、淘宝商品详情页上拉查看详情

话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大体思路就是这样,具体怎么个实现法代码注释比较详细了,由于比较懒,就不多写了,大家看代码有什么不懂的给我留言就是了.对了,开发工具是android studio.点这里下载: