UICollectionView实现无限滚动(理解花了我不少时间)
第一步:
// 程序一开始就滚动到第二个cell
// 滚动的前提是已经有cell数据了(所以不要在数据还没有加载就滚动)
NSIndexPath *idxPath = [NSIndexPath indexPathForItem:1 inSection:0];
[self.collectionView scrollToItemAtIndexPath:idxPath atScrollPosition:0 animated:NO];
第二步:
// 增加一个属性,表示当前图片的索引
@property (nonatomic,assign) NSInteger currentIndex;
// 停止滚动(减速)的时候调用该方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//获取滚动了多少个cell大小(因为滚动前cell就偏移了一个cell的距离,所以实际cell滚动的大小要减去一)
NSInteger offset = scrollView.contentOffset.x/ scrollView.bounds.size.width - 1;
//当前(上一个当前)图片的索引加上滚动的大小就是滚动后图片的索引(也就是最新的currentIndex)
self.currentIndex = (self.currentIndex + offset + self.headlines.count) % self.headlines.count;
// cell.headline = self.headlines[index];这段代码的内部是异步执行的(加载网络图片),所以把下面的代码放在主队列中,等主线程上的代码执行完毕之后再执行.
dispatch_async(dispatch_get_main_queue(), ^{
// 当滚动结束后,让第一个cell再偷偷的(无动画)滚回界面
// 所以还会自动执行返回cell的方法
NSIndexPath *idxPath = [NSIndexPath indexPathForItem:1 inSection:0];
[self.collectionView scrollToItemAtIndexPath:idxPath atScrollPosition:0 animated:NO];
});
}
第三步:
// 要显示多少个cell,当前方法将被调用多少次(所以当前程序第一次启动时也要调用一次)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionViewcellForItemAtIndexPath:(NSIndexPath*)indexPath {
HMHeadlineCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"headline" forIndexPath:indexPath];
//(当然在程序刚进来的时候,item为1)
//1. 这里不能使用self.currentIndex表示下一个图片的索引,否则会出现拖动的时候下一张图片和当前图片相同.
//2. 当图片一个一个滚动的时候,currentIndex在变化,下一个图片不是在currentIndex的基础上+1,就是在currentIndex的基础上-1;而在图片一个一个滚动的过程中,indexPath.item的值不是0就是2,如果给item-1的话,item-1的结果不是-1就是1,所以计算下一个图片的索引可以使用 currentIndex + item - 1。
//3. 当图片快速滚动的时候,currentIndex没有发生变化,但是item值不会只是0或2了,它会随着快速滚动图片的个数而发生变化(递增或者递减),item-1的值也不会只是-1或者1了;但是注意,当我们快速滚动的时候,这个方法会被连续调用,所以item-1可能表示的是下一个图片,也可能表示的是下下个图片,所以使用currentIndex + item - 1也是可行的。
//4. 为了在图片滚动的时候不越界,所以加上self.headlines.count,再对self.headlines.count取余
NSInteger index = (self.currentIndex + indexPath.item- 1 + self.headlines.count)% self.headlines.count;
cell.headline = nil;
//下一个模型数据赋给cell
cell.tag = index;
cell.headline = self.headlines[index];
return cell;
}
UICollectionView实现无限滚动(理解花了我不少时间)相关推荐
- UICollectionView的无限滚动---妥协做法
项目中总有写比较变态的需求,我们的UI设计师有喜欢很酷的交互,其中有个需求类似这种的 右侧部分是可以滚动的当然是无限滚动,这中效果只有UICollectionView的自定义布局才能实现,重写Layo ...
- 解决一个偶现的503 bug,花了俺不少时间
概述 在3月2日晚上,大概8点左右,本想打道回府,回家休息,突然被人在bug群@了一下,说是管理后台,访问不了,界面上出现了: 503 service temporarily unavailable ...
- Swift 4 无限滚动轮播图(UICollectionView实现)
作为一个资深(自认为)iOS程序猿,会经常用到轮播图,但是总是感觉自己实现要比直接用别人的要方便一点,并且有一些需求需要深度定制,于是想着自己封装一个可以定制化的轮播图库JCyclePictureVi ...
- c# ui 滚动 分页_UI备忘单:分页,无限滚动和“加载更多”按钮
c# ui 滚动 分页 重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...
- 不要在网站上无限滚动!
人们在浏览网站的时候是喜欢用"无限滚动",还是喜欢点击""或"查看更多"?无限滚动消除了分页的需要--分页是将数字内容分离到不同页面的过程. ...
- 当前元素_90行代码,15个元素实现无限滚动
前言 在本篇文章你将会学到: IntersectionObserver API 的用法,以及如何兼容. 如何在React Hook中实现无限滚动. 如何正确渲染多达10000个元素的列表. 无限下拉加 ...
- 分页与无限滚动在评论区的设计差异
本文由作者 呆呆丶 于社区发布 本篇文章的问题挺有意思,虽然是一个页面中无关紧要的模式,但却是典型的反模式设计,各位可以简单读读. 读者提问: 社区论坛类产品,天涯.虎扑与百度贴吧的帖子评论页有一个设 ...
- datagridview滚动条自动滚动_掘金上摸鱼的新发现,无限滚动(infinitescroll)
前言 上班摸鱼,下班摸鱼,一直摸一直爽.在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所示: 掘金官网 ...
- 无限滚动重置服务器,简单无限滚动的实现
在使用elementUI组件库的时候,用到了无限滚动这个功能.我没有看源码,直接在网上学习了下实现的思路,然后自己手动编码以下.在此总结下. 假设页面上有一个盒子容器,容器内有一些子元素.容器的高度是 ...
最新文章
- 知乎算法团队负责人孙付伟:Graph Embedding在知乎的应用实践
- Android教你打造独一无二的刷新加载框架
- linux网卡热,linux网卡
- python树的实现_Python实现简单字典树的方法
- 关于Visual Studio 当前不会命中断点.还没有为该文档加载任何符号的解决方法
- ud分区删除工具_硬盘分区GPT分区怎么转MBR呢?硬盘分区GPT分区转MBR教程
- (OPN)Onion Peel Networks for Deep Video Completion
- GitBash添加tree命令
- firefox 开源_Firefox 10岁了,Microsoft开源了更多,等等
- 电话号码被标记,快速取消教程
- MPB:林科院袁志林组-树木共生真菌菌株纯化及快速鉴定方法
- 常用收藏(自己用的)
- macOS Ventura 13.1 (22C65) 正式版发布,ISO、IPSW、PKG 下载
- QT6程序全屏和隐藏鼠标指针笔记
- 符号检验和置信区间R代码
- Python周刊491期
- 7500字拆解林清轩:说透了的“数字化转型”还有什么秘密武器?
- Hoeffding 不等式
- AMD芯片支持oracle数据库,ORACLE宣布支援AMD OPTERON处理器
- cascade down_cascade是什么意思_cascade的翻译_音标_读音_用法_例句_爱词霸在线词典...