实现商品详情页

实现了一个常用到的商品详情页，效果如下

：

关键代码如下：

 1 #pragma mark - 配置各个滚动视图的上拉和下拉操作
 2 - (void)configureRefresh {
 3     // 动画时间
 4     CGFloat duration = 0.3f;
 5     
 6     // 1.设置 UITableView 上拉显示商品详情
 7     MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingBlock:^{
 8         [UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
 9             self.scrollView.contentOffset = CGPointMake(0, self.scrollView.height);
10         } completion:^(BOOL finished) {
11             [self.tableView.footer endRefreshing];
12         }];
13     }];
14     footer.automaticallyHidden = NO; // 关闭自动隐藏(若为YES，cell无数据时，不会执行上拉操作)
15     footer.stateLabel.backgroundColor = self.tableView.backgroundColor;
16     [footer setTitle:@"继续拖动，查看图文详情" forState:MJRefreshStateIdle];
17     [footer setTitle:@"松开，即可查看图文详情" forState:MJRefreshStatePulling];
18     [footer setTitle:@"松开，即可查看图文详情" forState:MJRefreshStateRefreshing];
19     self.tableView.footer = footer;
20     
21     
22     // 2.设置 UIWebView 下拉显示商品详情
23     MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingBlock:^{
24         //设置动画效果
25         [UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
26             self.scrollView.contentOffset = CGPointMake(0, 0);
27         } completion:^(BOOL finished) {
28             //结束加载
29             [self.webView.scrollView.header endRefreshing];
30         }];
31     }];
32     header.lastUpdatedTimeLabel.hidden = YES;
33     
34     // 设置文字、颜色、字体
35     [header setTitle:@"下拉，返回商品简介" forState:MJRefreshStateIdle];
36     [header setTitle:@"释放，返回商品简介" forState:MJRefreshStatePulling];
37     [header setTitle:@"释放，返回商品简介" forState:MJRefreshStateRefreshing];
38     header.stateLabel.textColor = [UIColor redColor];
39     header.stateLabel.font = [UIFont systemFontOfSize:12.f];
40     self.webView.scrollView.header = header;
41     [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
42     
43     
44     // 3.设置 UICollectionView 下拉显示商品详情
45     MJRefreshGifHeader *cHeader = [MJRefreshGifHeader headerWithRefreshingBlock:^{
46         [UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
47             self.scrollView.contentOffset = CGPointMake(0, 0);
48         } completion:^(BOOL finished) {
49             [self.collectionView.header endRefreshing];
50         }];
51     }];
52     cHeader.lastUpdatedTimeLabel.hidden = YES;
53     [cHeader setTitle:@"下拉，返回商品简介" forState:MJRefreshStateIdle];
54     [cHeader setTitle:@"释放，返回商品简介" forState:MJRefreshStatePulling];
55     [cHeader setTitle:@"释放，返回商品简介" forState:MJRefreshStateRefreshing];
56     header.stateLabel.font = [UIFont systemFontOfSize:12.f];
57     header.stateLabel.textColor = [UIColor redColor];
58     self.collectionView.header = cHeader;
59 }

 

通过该方法，配置好各个滚动视图下拉和下拉之间的关系，即可实现如上图的商品详情页效果。

  尊重作者劳动成果，转载请注明： 转载自【kingdev】

 源     码：商品详情页源码

posted @ 2016-02-18 13:38  Kingdev  阅读(607)  评论(0)  编辑  收藏  举报