参考文章：

https://blog.csdn.net/PMxiang/article/details/108024635?fromshare=blogdetail&sharetype=blogdetail&sharerId=108024635&sharerefer=PC&sharesource=bugmebig&sharefrom=from_link

前言

做了一个背包系统，且基于ScrollRect实现了一个基础的无限滚动的功能，虽然原理很简单，但我实际上手发现还是有很多坑要踩。本文章将对自己的无限滚动做一个基础向的教程、总结，以及记录下遇到的坑点。

首先，关于无限滚动我们需要明白他的原理，然后才能思考如何去实现，或者思考怎么样拆解步骤，逐一攻破。废话正式结束，让我们直接开始

无限滚动的原理

无限滚动就是，让有限的格子数量显示出“无限”的格子数量，或者说让有限的UI层装载“无限”的数据层。其基本原理就是让看不到的UI随着滑动不断的进行置顶或者置后，进而更新数据来达到一个视觉上的循环效果。基本逻辑如图所示：

弄懂原理后，接下来我们将可以思考如何具体实现，同时也可以看出其实就是两大部分，什么时候是向上或向下滑动，如何将底部和顶部的数据进行交换更新（也就是如何更新UI层的数据）。接下来让我们逐一攻破这两大部分

向上或者向下滑动判定

首先，我们先思考向上滑动的判别（向下滑动也是一样的逻辑）。对与判断我其实首先想到的是判断content下子物体的位置，盯住显示位置的最顶坐标和最底坐标。发生向上移动（unity UI坐标系中以屏幕中心为0点，向上走动后的Y轴坐标必然大于原来位置），也就是发生了上滑。但其实这个想法是有问题的，那就是Content下的子物体坐标是不发生移动的，而上下滑动本质上是调整Content的Y轴坐标，子物体坐标相对父物体坐标不变。那既然如此那就判断Content的位置好了，如图：

弄清向上滑动后，向下滑动也是如此。接下来就是更新UI层的数据

UI层的数据更新

其实UI层的更新非常简单，只要在Content的Y轴位置超过了一个格子或者n个格子的高度后，就可以让最上面的格子置底到最下面，并且更新数据层。这个我将不在继续画图，让我们直接写代码来实现这个功能吧！

代码部分

之前说过，无限循环就是用有限个UI格子来展示无限多个数据。为此，我们需要定义两个参数，展示的UI数量，以及展示的数据数量

这里为什么我不直接定义能看到的所有格子数量呢？因为我懒得算可以展示多少个数据了，设置行数让程序帮我们自动生成且保证数据的正确即可（数据的正确？也就是确保N行M列中不会出现不满列的情况，如3*3的表格UI中，第3行只有2个（列）数据，一共8个数据，这时候需要修正成9个数据，铺满整个表格）

在这之前我们需要知道背包格子的长宽，以及每个格子之间的上下左右的间距，这样我们才能修正数据。在这里我用到了 gridLayoutGroup组件，我只需要通过他填充好背包格子直接的间隔，还有边距就好，这样做可以直接在编辑器下手动生产数据来看效果，进行随时调整参数，当然我们不需要他的自动排布，因为开启后我们将无法对背包格子进行移动操作，更重要的是我们是自动生成的UI格子，无法正确捕获到gridlayoutgroup组件什么时候能自动排序好，得以让我们关闭。

这是初始化的代码

我们将重点讲解实例化的OnInitBasicData()方法

注意：m_defualtEndRowIdx应该为显示的行数+1，为了保持可见区域更新没有这么突兀

OnInitRowAndColumn()，方法没有什么要解释的，就是简单的计算

初始化完成后，就是最核心的逻辑，需要装载到scollrect的监听时间中

我将解释向上滑动的逻辑。向下滑动的逻辑差不多，但是有一个小坑，那就是滑动content后 OnScollView(Vector2 Pos)函数会一直调用，直到content停下，所以导致Y轴坐标是一直变的，如果判断不好，那向下滑动一点点都是会一直触发向下滑动的逻辑

至此，无限背包的功能已基本结束。

最后再总结一下：

1. 进行初始化（组件，数据，生产UI，监听）

2. 写核心逻辑 上下滑动后更新UI和数据层

   1. 根据content的Y轴位置进行判断走了多少个格子高度（请不用忽略他们直接的间隔）

   2. 需要置顶（置底）的UI更新后，记得要更新数据结构

   3. 可以通过位置或者行数来抓取想要的数据