iOS轮播图，用CollectionView自定义轮播图，pagingEnable原理

最新推荐文章于 2020-11-13 15:12:44 发布

原创

最新推荐文章于 2020-11-13 15:12:44 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iOS轮播图 #CollectionView自定义轮播图 #pagingEnable原理

本文介绍了如何使用UICollectionView自定义无限轮播图，并模拟pagingEnable效果。通过设置虚拟数据实现无限滚动，调整scrollView拖动后的目标位置，以及修改减速率以达到平滑翻页的感觉。详细代码和实现思路可供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图.gif

写在前面

我的需求是轮播图两侧需要有间距，有点类似于QQ音乐发现页的轮播图。一开始就想到collectionView来实现高效的轮播图。但是对于ScrollView的pagingEnable这样的属性，在banner两侧到屏幕有间距的时候，就会有问题。所以就顺带模拟实现了ScrollView的PagingEnable为YES时的效果。

关键代码

一、最最重要的当然是怎么让有限的数据来实现无限轮播呢？

比方我们接口返回轮播图的数据只有4个，但是我们要实现无限滚动，怎么办呢？

我们可以设置一个虚拟数据virtualCount，设置到很大，比如：virtualCount = 1000000。然后用这个虚拟数据来充当collectionView数据源的个数。然后在用到model数据的时候再取余从数据源中取model。就是这个意思self.dataArray[virtualCount%self.dataArray.count];

具体见如下代码：

- (void)setupBannerData:(NSArray *)models {
    if (!models || models.count == 0) return;

    //配置数据
    self.dataArray = [NSMutableArray arrayWithArray:models];
    if (models.count == 1){
        //数据源个数等于1的时候，不需要轮播，虚拟数据设置为10000
        self.virtualCellCount = 1;