上面的效果是商品详情页常用的两种模式,分页和不分页。首先请忽略博主懒得去写界面,真正的效果见下面:
不分页模式
分页模式
然后先来依次说明下原理:
分页模式:看着和下拉刷新上拉加载的时候像不像?没错,博主这里用的MJRefresh写的效果,往上时下拉改变底部scrollView的偏移量,往下时加载结束改变底部scrollView的偏移量。其他的布局按照正常的界面来即可,so easy。
不分页模式:这里要着重说明,实现的方式有两种:
1)把网页放在tableView的cell里,等到网页加载结束后在代理里面获取网页size的height,然后给cell的行高赋值,刷新tableView对应webView的cell(貌似挺麻烦的,不过相对博主使用的方法可能真的好点,为什么好点,看下面);
2)类似于给webView加header,然后把tableView加入webView的header,方法:
#pragma mark - creatWebViewForGoodsdetail - (void)creatWebViewForGoodsdetail { detailWebView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 64, 375, 667 - 64)]; detailWebView.backgroundColor = [UIColor whiteColor]; //在webView的scrollView中插入一块和tableViewsize的height一样的区域(实则是改变偏移量) detailWebView.scrollView.contentInset = UIEdgeInsetsMake(detailTableView.contentSize.height, 0, 0, 0); //插入这块区域后,那块区域是黑色的,看起来视觉真。。。好吧,就是丑,所以设置下面两句代码即可 detailWebView.backgroundColor = [UIColor clearColor]; detailWebView.opaque = NO; [self.view addSubview:detailWebView]; /*然后tableView的frame一开始固定了,但是如果tableView可滚动高度大于或者小于其实际frame 的高度岂不是能相对于web滚动,这肯定不合适,所以这里重新设置tbaleView的frame的高度为 tableView可滚动的高度*/ detailTableView.frame = CGRectMake(0, -detailTableView.contentSize.height,375, detailTableView.contentSize.height); [detailWebView.scrollView addSubview:detailTableView]; NSURLRequest *webRequest = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:@"http:www.baidu.com"]]; NSURLResponse *response = nil; [NSURLConnection sendSynchronousRequest:webRequest returningResponse:&response error:nil]; [detailWebView loadRequest:webRequest]; }
因为是tableView加在web上,所以当web加载完毕时tableView才会显示出来,第一次进入网速慢的话可能会显示空白,会有点慢,算是一个弊端吧,不过一般来说没人会注意,但这的确是一个小问题,所以能分页最好分页。或者把web放在cell中来做。
代码下载地址:点击前往下载