iOS开发商品详情页两种分页模式,只提供思路和实现方式。

释放双眼,带上耳机,听听看~!

上面的效果是商品详情页常用的两种模式,分页和不分页。首先请忽略博主懒得去写界面,真正的效果见下面:


不分页模式


分页模式

然后先来依次说明下原理:
分页模式:看着和下拉刷新上拉加载的时候像不像?没错,博主这里用的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中来做。

代码下载地址:点击前往下载

人已赞赏
iOS文章

iOS 开发tableView内嵌scrollView时,在plus上滑动scrollView时和tableView有冲突

2021-2-2 12:45:35

iOS文章

iOS开发仿京东添加收货地址效果

2021-2-2 13:39:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索