商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化

Posted Darren-chen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化相关的知识,希望对你有一定的参考价值。

商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化,首先先看下效果图:

 

然后我来介绍一下这个界面的总体架构,整个页面上放置一个tableView,下面的网页是tableView的footerview,中间规格所在的区域是一个cell上放置一个collectionView,

问题点1:商品规格可能有很多种,比如颜色、重量。也可能没有规格,所以中间的cell的高度是根据规格的多少而变化的,那么collectionView创建完成以后要怎么通知tableView,让他的cell高度也随着变化呢?

问题点2:网页是tableView的footView,那么如何获取网页的高度来设置tableView的foot呢?

 

1.首先说下问题1,在collectionView设置完数据源以后会调用这个方法

 [self.collectionView performBatchUpdates:^{
        //更新collection的约束一定要写在reload完成之前,否则会导致crash
        
    } completion:^(BOOL finished) {
        //这里为了防止循环调用该方法,引入isNeedRefresh属性来做控制
        NSLog(@"========%f",self.collectionView.collectionViewLayout.collectionViewContentSize.height);
        if (!self.isNeedRefresh) {
            self.isNeedRefresh = YES;
            if (self.sandCollectionViewHeughtBlock) {
                self.sandCollectionViewHeughtBlock([NSString stringWithFormat:@"%f",self.collectionView.collectionViewLayout.collectionViewContentSize.height]);
            }
        }
    }];
在这个方法中可以返回collectionView的具体高度,拿到高度后通过block不断传值,把高度传给tableView界面。注意,在tableView界面拿到高度后一定要刷新界面或者刷新指定的cell,不然会导致collectionView上的cell点击后没有任何反应,因为不刷新就不会重新设置tableViewcell的高度。

2.设置网页的详情页。由于网页是放置在tableView的footview上,所以一定要等tableView创建完成后再去加载网页,网页加载完成后再去调用你和后台约定好的js方法来获取网页的高度

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [GiFHUD dismiss];
    
    // 获取高度   bodyHeight是后台开发人员写的js方法,返回网页的高度
    NSString *str = [webView stringByEvaluatingjavascriptFromString:@"bodyHeight()"];
    NSLog(@"JS返回值:%@",str);
    self.webViewH = [str floatValue];
    self.tableView.tableFooterView = [self setupTableViewFoot];
}

js方法,

function bodyHeight () {
        console.log(document.body.scrollHeight);
        return document.body.scrollHeight;
    }

 

备注:其实商品详情页面这么做的用户体验也不是很好,类似于淘宝,京东的效果用户体验好,也比较容易实现,上面这种需求是客户的指定需求,没办法,只能这么搞了!

 

以上是关于商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化的主要内容,如果未能解决你的问题,请参考以下文章

非框架, 纯原生JS “商品详情跳转到商品列表,并记录高度“ 的写法思路

Android中仿淘宝商品详情ViewPager页面数据手动滑动

获取各种高度 等H5页面笔记

获取各种高度 等H5页面笔记

利用js动态生成一个简单的商品详情页

使用Python+Selenium获取淘宝商品详情页面数据 ajax加载怎么取