iOS知识收录iOS开发的正确姿势码农驿站

模仿淘宝商品详情上提加载显示WebView页面(附Demo源码地

2016-09-21  本文已影响657人  阿基米敬

GIF演示:


其实我写的这个特别简单,只能说在一些大神面前献丑了,实现淘宝的这个效果,首先要熟悉IOS的视图布局,了解UITableView、UIScrollView、UIWebView的基础,然后会使用MJRefresh和IOS动画即可;
希望各位多多提下意见,或者告诉我一些别的实现方式!谢谢大家

思路分析:




- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    //创建导航栏标题
    self.topTitleView = [[UILabel alloc] init];
    self.topTitleView.textAlignment = NSTextAlignmentCenter;
    self.topTitleView.text = @"导航栏标题-UITableView";
    self.topTitleView.backgroundColor = [UIColor colorWithRed:0.45f green:0.84f blue:1.00f alpha:1.00f];
    self.topTitleView.textColor = [UIColor blackColor];
    self.topTitleView.frame = CGRectMake(0, 0, IPHONE_W, 50);
    [self.view addSubview:self.topTitleView];
    
    //创建scrollPullViewiew
    self.scrollPullView = [[UIScrollView alloc]initWithFrame:CGRectMake(0,50, IPHONE_W, IPHONE_H-50)];
    self.scrollPullView.contentSize = CGSizeMake(IPHONE_W, (IPHONE_H-50) * 2);
    self.scrollPullView.pagingEnabled = YES;
    self.scrollPullView.backgroundColor = [UIColor whiteColor];
    //禁用滚动
    self.scrollPullView.scrollEnabled = NO;
    [self.view addSubview:self.scrollPullView];
    
    //创建上面的TableView
    self.tablePullView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, IPHONE_W, IPHONE_H-50) style:UITableViewStylePlain];
    self.tablePullView.delegate = self;
    self.tablePullView.dataSource = self;
    self.tablePullView.backgroundColor = [UIColor whiteColor];
    [self.scrollPullView addSubview:self.tablePullView];
    
    //创建下面的webView
    self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, IPHONE_H, IPHONE_W, IPHONE_H)];
    self.webView.backgroundColor = [UIColor whiteColor];
    [self.scrollPullView addSubview:self.webView];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
    //设置UITableView 下拉刷新和上提加载
    [self.tablePullView addHeaderWithTarget:self action:@selector(tablePullViewHeaderRefrsh)];
    [self.tablePullView addFooterWithTarget:self action:@selector(tablePullViewFootRefrsh)];
    //设置UIWebView 下拉操作
    [self.webView.scrollView addHeaderWithTarget:self action:@selector(webViewHeaderRefrsh)];

}


//UITableView 下拉头部刷新方法
-(void)tablePullViewHeaderRefrsh
{
    [self.tablePullView headerEndRefreshing];
}
//UITableView 上提刷新方法 显示WebView页面
-(void)tablePullViewFootRefrsh
{
    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
        self.scrollPullView.contentOffset = CGPointMake(0, IPHONE_H);
    } completion:^(BOOL finished) {
        //结束加载
        self.topTitleView.text = @"导航栏标题-WebView";
        [self.tablePullView footerEndRefreshing];
    }];

}




//WebView 下拉显示头部试图
-(void)webViewHeaderRefrsh
{
    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
       self.scrollPullView.contentOffset = CGPointMake(0, 0);
    } completion:^(BOOL finished) {
        //结束加载
      self.topTitleView.text = @"导航栏标题-UITableView";
      [self.webView.scrollView headerEndRefreshing];
    }];
    
}

源码下载地址:http://www.code4app.com/thread-10751-1-1.html

模仿淘宝商品详情上提加载显示WebView页面(附Demo源码地址)
上一篇下一篇

猜你喜欢

热点阅读