如何实现无限水平CollectionView首项左滑切换至末项的功能？

要实现你需要的双向无限循环效果，核心思路是通过扩展数据源数组+滚动后无缝重置位置的方式，让用户感知不到边界的存在，具体实现步骤如下：

1. 构造扩展数据源 #

不要直接使用原数组[1,2,3,4,5,6]，而是构造一个包含首尾重复元素的扩展数组：

let originalData = [1,2,3,4,5,6]
var extendedData: [Int] {
    // 在原数组头部追加最后一个元素，尾部追加第一个元素
    return [originalData.last!] + originalData + [originalData.first!]
}

这个扩展数组的结构是[6,1,2,3,4,5,6,1]，这样初始显示中间的1时，向左滑能看到6，向右滑到末尾的1时，也能无缝衔接原数组的循环逻辑。

2. 初始滚动定位 #

CollectionView加载完成后，直接滚动到扩展数组的第1个索引位置（对应原数组的第一个元素1），确保初始显示的是你需要的首个单元格：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    let initialIndex = IndexPath(item: 1, section: 0)
    collectionView.scrollToItem(at: initialIndex, at: .left, animated: false)
}

如果使用自动布局，建议把这段代码放到viewDidLayoutSubviews中执行，避免布局未完成导致的位置偏差。

3. 滚动结束后重置位置 #

通过UIScrollView的代理方法，在滚动停止后判断当前位置，无缝重置到对应的重复元素位置，实现循环效果：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    adjustScrollPosition()
}

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
    adjustScrollPosition()
}

private func adjustScrollPosition() {
    guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    // 计算单个item的总宽度（item宽度+间距）
    let itemTotalWidth = flowLayout.itemSize.width + flowLayout.minimumLineSpacing
    // 获取当前显示的item索引
    let currentItemIndex = Int(collectionView.contentOffset.x / itemTotalWidth)
    
    switch currentItemIndex {
    case 0:
        // 滑到了扩展数组的第一个元素（原数组最后一个6），直接跳转到扩展数组倒数第二个位置（同样是6）
        let targetIndex = IndexPath(item: extendedData.count - 2, section: 0)
        collectionView.scrollToItem(at: targetIndex, at: .left, animated: false)
    case extendedData.count - 1:
        // 滑到了扩展数组的最后一个元素（原数组第一个1），直接跳转到扩展数组第二个位置（同样是1）
        let targetIndex = IndexPath(item: 1, section: 0)
        collectionView.scrollToItem(at: targetIndex, at: .left, animated: false)
    default:
        break
    }
}

4. 数据源方法适配 #

修改CollectionView的数据源方法，使用扩展数组来返回cell：

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return extendedData.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCellID", for: indexPath) as! YourCustomCell
    // 绑定数据，扩展数组元素和原数组一致，复用逻辑不受影响
    cell.displayContent(with: extendedData[indexPath.item])
    return cell
}

注意事项 #

• 确保item宽度计算准确：如果使用自定义布局，要根据实际布局逻辑计算单个item的总宽度，避免索引判断错误。
• 滚动重置时关闭动画：设置animated: false可以让位置切换毫无察觉，保证循环的流畅性。
• cell复用正常：因为扩展数组的元素都是原数组的重复，cell的复用逻辑和原来完全一致，不会有额外问题。

内容的提问来源于stack exchange，提问作者Louiza A