商品详情页面特殊制作,获取网页的高度,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;
    }

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

时间: 2024-08-07 12:50:16

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

商品详情页面的显示

当点击商品图片的时候,会跳转到商品的详情页面,我们看下具体是如何实现的: 1.点击商品的图片,打开商品详情页面 a)         商品基本信息 b)        延迟加载商品详情.延迟一秒加载使用ajax c)         商品的规格参数.按需加载,当用户点击商品规格参数tab页,加载ajax. 如图:点击图片后显示内容如下: 所以需要从三个表中获取数据,发布服务接口: 需要在taotao-rest工程中发布服务 1.取商品基本信息的服务 2.取商品描述的服务 3.取商品规格的服务 需

ios 类似淘宝商品详情页面的效果

今天试着写ios 类似淘宝商品详情页面的效果 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中的delegate方法, 实现delegate代理方法的时候使用 - (void)s

JAVAEE——宜立方商城09:Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存

1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 第一步:引用相关的jar包. <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jms</artifactId> </dependency> &l

php获取网页中图片与DIV内容实例

分享下php获取网页中图片.DIV内容的简单方法,都是通过正则表达式实现的. 1.获取网页中所有的图片: <?php //取得指定位址的內容,并储存至 $text $text=file_get_contents('http://www.jbxue.com/'); //取得所有img标签,并储存至二维数组 $match 中 preg_match_all('/<img[^>]*>/i', $text, $match); //打印出match print_r($match); ?>

SSH网上商城---商品详情页的制作

在前面的博文中,小编分别简单的介绍了邮件的发送以及邮件的激活,逛淘宝的小伙伴都有这样的体会,比如在搜索框中输入连衣裙这个商品的时候,会出现多种多样各种款式的连衣裙,连衣裙的信息包括价格,多少人购买,商品的名称等等,但是这些信息不够详情,我们需要了解更多的关于连衣裙的详情,点击某个商品,跳转页面,查看连衣裙的详情,以前小编逛淘宝的时候,从来都没有想过这个功能是如何实现,只知道一个劲儿的在那儿逛,小编现在接手的这个项目中就遇到这样的功能,点击商品跳转到某个商品的详情页面,这个功能该如何实现呢?不要着

ecshop商品详情页面显示购买记录

1.在goods.php中写入代码: //购买的历史记录 function getsales_history($goods_id){ $sql ='select f.consignee, f.order_sn, f.address,g.goods_name,g.goods_number,f.add_time FROM '. $GLOBALS['ecs']->table('order_goods') .' as g,'. $GLOBALS['ecs']->table('order_info')

cc_美团 商品详情页面分享页面实现

<RelativeLayout android:id="@+id/rl_share" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" > <RelativeLayout android:id="@+id/other_layout_top" a

Beatiful Soup获取淘宝商品详情

Beatiful Soup生成商品详情页面的剖析树, 主要函数:findAll(name=None, attrs={}, recursive=True, text=None, limit=None, **kwargs) 利用findAll先获取标签范围的内容,再利用正则表达式进行匹配输出. Beatiful Soup的中文文档: http://www.crummy.com/software/BeautifulSoup/bs3/documentation.zh.html#Searching%20t

easymall项目的商品删除,前台商品分页,商品详情,购物车模块

简单的挑选一下昨天所学的重点知识模块,以备后续的复习 一.购物车模块1.1购物车两种实现的区别:!!!!!!!! 用session保存  缺点:浏览器关闭,session失效时保存在session中购物信息将会消失  后续优化,将购买的信息除了保存在session中以外,还要将购物的信息保存在cookie中,这样  就解决了浏览器关闭购买商品信息丢失的问题(但是解决不了跟换电脑信息丢失的问题)  优点:不用操作数据库,可以减少数据库访问压力 数据库中:  缺点:只用登录的用户才能添加购物车