UICollectionView未正确更新 - 使用THStringyFlowLayout(UICollectionView is not updating properly - used THStringyFlowLayout)

当我的应用程序启动时,它会从持久性中获取数据并在我的集合视图中显示5个单元格。 这些单元格看起来像普通的TableView单元格,但我使用Collection View进行后续的布局调整。 整个屏幕需要8个单元格。

之后的第二秒,使用19个单元格的数据更新模型,并通过调用以下内容更新集合视图:

[self.collectionView reloadData];

已经显示5个单元格的那些用新数据很好地刷新,但就是这样。 直到我触摸屏幕并向下滚动单元格的高度,才会显示其他单元格。 然后立即显示3个单元格并填充屏幕。 从那一刻起,一切都很好,但在滚动之前,它没有正确更新。

当我调试它时,我看到,在调用reloadData之后调用collectionView:numberOfItemsInSection:它返回正确的数字19,但是只询问那些5个单元格的collectionView:cellForItemAtIndexPath:(直到我滚动)。

有点绝望,谢谢你的帮助。

编辑 - 添加源代码:

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [self.manager.jubilees count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    DLog(@"asked for cell: %i", indexPath.row); //just for debugging to know, what is going on
    JUJubileeCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"JubileeCell"
                                                                forIndexPath:indexPath];
    cell.jubilee = self.manager.jubilees[(NSUInteger) indexPath.row];
    return cell;
}

// called when model is updated
-(void)jubileesUpdated {
    DLog(@"jubileesUpdated");
    [self.collectionView reloadData];
}

编辑2:当加载前5个单元格时,[self.collectionView contentSize]为(width = 320,height = 358)。 当加载所有19个单元格并调用reloadData时,contentSize为(width = 320,height = 1366) - 但实际上并未显示单元格:(。

编辑3:问题是由使用THStringyFlowLayout引起的 - 如果我找到原因,我会发布更多内容。


When my app starts, it takes data from the persistence and displays 5 cells in my Collection View. These cells looks like normal TableView cells, but I use Collection View for later layout tweaks. It takes 8 cells to fill whole screen.

A second after that, the model is updated with the data for 19 cells and the Collection View is updated by calling:

[self.collectionView reloadData];

Those already displayed 5 cells are nicely refreshed with new data, but that's it. The other cells are not displayed until I touch the screen and scroll down about the height of the cell. Then instantly 3 cells are displayed and fills the screen. From that moment, everything is fine, but until I scroll, it is not updated correctly.

When I debugged it, I see, that the collectionView:numberOfItemsInSection: is called after calling reloadData and it returns correct number 19, but the collectionView:cellForItemAtIndexPath: is asked just for those 5 cells (until I scroll).

Kind of desperate here, thanks for your help.

Edit - added source code:

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [self.manager.jubilees count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    DLog(@"asked for cell: %i", indexPath.row); //just for debugging to know, what is going on
    JUJubileeCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"JubileeCell"
                                                                forIndexPath:indexPath];
    cell.jubilee = self.manager.jubilees[(NSUInteger) indexPath.row];
    return cell;
}

// called when model is updated
-(void)jubileesUpdated {
    DLog(@"jubileesUpdated");
    [self.collectionView reloadData];
}

edit 2: When first 5 cells are loaded, the [self.collectionView contentSize] is (width=320, height=358). When the all 19 cells are loaded and reloadData called, contentSize is (width=320, height=1366) - but cells are not actually displayed :(.

edit 3: The problem is caused by using THStringyFlowLayout - I will post more, if I find the reason.


原文:https://stackoverflow.com/questions/22335503
2024-03-27 14:03

满意答案

借助jquery,您可以获得渲染图像的高度。

然后,您只需更改偏移参数。 这是一支笔: https : //codepen.io/anon/pen/KyQddz

<div class="navbar">
  This is my navbar
</div>
<figure>
  <img src="https://via.placeholder.com/350x80" />  
</figure>



* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}
.navbar {
  background: red;
  width: 100%;
  height: 60px;
  position: fixed;
  top:0;  
}
.shrink {
  background: green;
}
figure {
  height: 2000px;
}
img {
  display: block;
  width: 100%;
  height: auto;
}

var imgHeight;

$(window).on('load', function () {
  imgHeight = $('img').height();
});

$(window).scroll(function() {
  if ($(document).scrollTop() > imgHeight) {
    $('.navbar').addClass('shrink');
  } else {
    $('.navbar').removeClass('shrink');
  }
});

如果你想让导航栏只在你滚动图像的高度后才能修复,只需要移动position:fixed;top:0;.shrink类。

.navbar {
      background: red;
      width: 100%;
      height: 60px; 
    }
    .shrink {
      background: green;
      position: fixed;
      top:0;
     }

You can get the height of your rendered image thanks to jquery.

Then, you simply change the offset parameter. Here is a pen: https://codepen.io/anon/pen/KyQddz

<div class="navbar">
  This is my navbar
</div>
<figure>
  <img src="https://via.placeholder.com/350x80" />  
</figure>



* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}
.navbar {
  background: red;
  width: 100%;
  height: 60px;
  position: fixed;
  top:0;  
}
.shrink {
  background: green;
}
figure {
  height: 2000px;
}
img {
  display: block;
  width: 100%;
  height: auto;
}

var imgHeight;

$(window).on('load', function () {
  imgHeight = $('img').height();
});

$(window).scroll(function() {
  if ($(document).scrollTop() > imgHeight) {
    $('.navbar').addClass('shrink');
  } else {
    $('.navbar').removeClass('shrink');
  }
});

If you want the navbar the be fixed only after you scroll the height of the image, just move position:fixed;top:0; to the .shrink class.

.navbar {
      background: red;
      width: 100%;
      height: 60px; 
    }
    .shrink {
      background: green;
      position: fixed;
      top:0;
     }

相关问答

更多

导航栏下的Bootstrap轮播(Bootstrap carousel under navbar)

只需在您的身体上添加一个与您的导航栏高度相当的margin-top ,如下所示: body { margin-top: 50px; } 注意用导航栏的高度替换50px 。 Just add a margin-top to your body equivalent to your navbar height like this: body { margin-top: 50px; } N.B. Replace 50px with height of your navbar.

让文本显示在导航栏下(Getting text to appear under navbar)

如果科林说什么不行 - 应该 - 只是尝试打字 text-align: center If what Colin said doesn't work - which should - just try typing text-align: center

Odoo博客封面图片没有显示(Odoo blog cover image not showing)

我会建议你清除浏览器的缓存,有时是因为缓存超载,我们没有得到图像。 Firstly, there are several things with the controller. The latest post route doesn't render cover-properties, it is like below: return request.render("website_blog.latest_blogs", { 'posts': posts, 'pag...

为什么我的常规导航栏覆盖标题,而折叠的标题没有?(Why does my regular navbar cover header while the collapsed one does not? (bootstrap/fullpage))

为什么使用.header位置固定? 它由nav header重叠{width:100%; 身高:100px; top: 0; } use try this why using .header position fixed ?? it overlap by nav header { width: 100%; height: 100px; top: 0; } use try this

斜杆上的Navbar(Navbar on Slanted Div)

当使用float时,你需要清除,所以下面的元素看起来正确。 我在这里添加: https : //jsfiddle.net/44x11g34/一个例子。 我在两个主要块之间添加了什么: <div class="clear"></div> 和一些小css .clear { clear: both; } 希望这会帮助你。 When using float, you need to clear, so the folllowing elements to look right. I have ad...

如何删除导航栏徽标和导航栏菜单之间的空格以及文本后面的导航栏徽标(How to remove the space between navbar logo and navbar menu and navbar logo behind the text)

您应该将类.navbar-brand添加到 <span class="logo"><img width="40%" src="images/windsor-logo_horizontal-colored.png" alt="WindSor"></span> 检查jsFiddle: https ://plnkr.co/edit/uquYGOtMFu2cNbbwQQFT ? p = preview You should probably add the class .navbar-brand to ...

缩小导航栏后封面图片(Shrink navbar AFTER cover image)

借助jquery,您可以获得渲染图像的高度。 然后,您只需更改偏移参数。 这是一支笔: https : //codepen.io/anon/pen/KyQddz <div class="navbar"> This is my navbar </div> <figure> <img src="https://via.placeholder.com/350x80" /> </figure> * { margin: 0; padding:0; box-sizing: bor...

如何在twitter boostrap导航栏中使用背景图片?(how to use background image in twitter boostrap navbar?)

如果你这样做它应该工作。 .navbar-inner{ background-image: url('navbar-bg.png'); background-repeat: repeat-x; } 演示: 在这里 if you do it like this it should work. .navbar-inner{ background-image: url('navbar-bg.png'); background-repeat: repeat-x; } Demo: her...

从ios中的epub获取封面图片(fetch Cover Image from epub in ios)

您必须解压缩ePub并解析元数据。 解析META-INF/container.xml并找到.OPF文件路径。 .OPF文件包含您需要的所有内容,带有名称cover的标签meta引用标签item ,这是图像封面。 您可以将此图像复制到某处并删除解压缩的文件。 PS:我是FolioReaderKit的创建者,一个用Swift 2编写的ePub Reader和Parser,这是我获得书籍封面FREpubParser.swift的地方 。 如果您不想处理XML,您可以使用它阅读ePub,它还将解析元数据并...

如何在封面图片下方放置文字?(How to put text below the cover image?)

更新小提琴 如果您知道图像只占据网站的顶部,则可以将文本对象放置在绝对位置,顶部为60%。 .text { position: absolute; top: 60%; } Updated fiddle If you know that the image willonly take up the top portion of the site, you can place the text object with an absolute position with the top...

相关文章

更多

fw:Hadoop、Pig、Hive、Storm、NOSQL 学习资源收集【Updating】

转自:http://m.oschina.net/blog/81771 Hadoop、Pig、Hive、 ...

顶 Hadoop、Pig、Hive、Storm、NOSQL 学习资源收集【Updating】

(一)hadoop 相关安装部署 1、hadoop在windows cygwin下的部署: ht ...

nginx禁止未绑定域名访问

对于未绑定的域名指向你的服务器时,匹配不到你配置的虚拟主机域名后,会默认使用这个虚拟主机,然后直接返回 ...

usic AS下如何正确设置solr

Apache Solr是一个基于Apache Lucene的企业级开源全文检索服务器,它支持层面搜索、 ...

Apache Hadoop未指明用户模拟漏洞

发布日期:2012-04-09 更新日期:2012-04-12 受影响系统: Apache Group ...

Solr范围查询,结果不正确问题

Solr 整合到项目中,当用price:[1 TO 1000] 进行范围查询时发现查询结果不对,发现s ...

[转] 米聊PK微信:未开战即结束

文/黄井洋 小米联合创始人黄江吉明确表示2012将是米聊发力的一年。但即便米聊万般发力,仍然只会在微信 ...

怎样正确查看Linux的内存占用情况

租的VPS是256M的内存,所以要经常查看一下内存的使用情况,查看内存使用的命令是free -m,m是 ...

Hadoop lzo 正确安装及问题解决

之前有篇文章 http://www.linuxidc.com/Linux/2012-08/67021. ...

你的服务器没有正确响应Token验证的解决方法

你的服务器没有正确响应Token验证,请阅读消息接口使用指南微信微信公众平台开发模式平台 消息接口启用 ...

最新问答

更多

如何在Laravel 5.2中使用paginate与关系?(How to use paginate with relationships in Laravel 5.2?)

请尝试以下方法: $messages = $user->contact_messages()->paginate(10); Try the following: $messages = $user->contact_messages()->paginate(10);

linux的常用命令干什么用的

linux和win7不一样,win7都图形界面,都是用鼠标来操作打开,解压,或者关闭。而linux是没有图形界面的,就和命令提示符一样的一个文本框,操作linux里的文件可没有鼠标给你用,打开文件夹或者解压文件之类的操作都要通过linux常用命令。

由于有四个新控制器,Auth刀片是否有任何变化?(Are there any changes in Auth blades due to four new controllers?)

它创建了这些视图: 'auth/login.blade.php', 'auth/register.blade.php', 'auth/passwords/email.blade.php', 'auth/passwords/reset.blade.php', 'layouts/app.blade.php', 'home.blade.php' 并修改这些文件: 'Http/Controllers/HomeController.php', 'routes/web.php' 如果使用--views

如何交换返回集中的行?(How to swap rows in a return set?)

您可以使用特殊的CASE表达式进行ORDER BY如下所示: SELECT * FROM table ORDER BY CASE id WHEN 3 THEN 8 WHEN 8 THEN 3 ELSE id END You can ORDER BY using a special CASE expression like this: SELECT * FROM table ORDER BY CASE id WHEN 3 THEN 8 WHEN 8 THEN 3 ELSE id END

在ios 7中的UITableView部分周围绘制边界线(draw borderline around UITableView section in ios 7)

我建议你制作一个新的TableView Cell,在这个newTableViewCell中,加载第2节中的所有单元格,然后为newTableViewCell提供边框。 但如果您不想这样做,那么您可以使用以下代码: @property(strong,nonatomic) CAShapeLayer* borderPath; -(void)viewDidLayoutSubviews{ [_borderPath removeFromSuperlayer]; UIView *viewToGiveBord

使用Boost.Spirit Qi和Lex时的空白队长(Whitespace skipper when using Boost.Spirit Qi and Lex)

出于一些奇怪的原因,我现在发现了一个不同的问题, Boost.Spirit SQL语法/词法分析失败 ,其中提供了一些其他解决方案来进行空格跳过。 一个更好的! 以下是根据建议重新编写的示例代码: #include #include #include #include #include #incl

Java中的不可变类(Immutable class in Java)

1.如果我只有final变量的课程? 这会让你远离但不是全部。 这些变量的类型也需要是不可变的。 考虑一下 class MyImmutableClass { // final variable, referring to a mutable type final String[] arr = { "hello" }; // ... } 这允许有人做 myImmutableObject.arr[0] = "world"; 并有效地改变你的不可变类的对象。 此外,建议禁

WordPress发布查询(WordPress post query)

如果你想要在div中包含所有帖子: post_parent) { $myposts = get_posts('numberposts=10&tag=medical&order=DESC'); echo ' '; foreach ($myposts as $post): ?>

如何在关系数据库中存储与IPv6兼容的地址(How to store IPv6-compatible address in a relational database)

我不确定哪个是MySQL的正确答案,因为它本身还不支持IPv6地址格式(尽管“ WL#798:MySQL IPv6支持 ”表明它将在MySQL v6.0中,当前文档不支持)。 不过,你建议的人建议去2 * BIGINT,但要确保他们是UNSIGNED。 在IPv6的/ 64地址边界处有一种自然分割(因为/ 64是最小的网格块大小),这将与其很好地对齐。 I'm not sure which is the right answer for MySQL given that it doesn't y

是否可以检查对象值的条件并返回密钥?(Is it possible to check the condition of a value of an object and JUST return the key?)

您可以使用Object.keys和Array#find来获取匹配value的key 。 const letters = {a:'26',b:'25',c:'24',d:'23',e:'22',f:'21',g:'20',h:'19',i:'18',j:'17',k:'16',l:'15',m:'14',n:'13',o:'12',p:'11',q:'10',r:'9',s:'8',t:'7',u:'6',v:'5',w:'4',x:'3',y:'2',z:'1'}; function sw