# aaaaaa_FastScrollView **Repository Path**: wzz886/aaaaaa_FastScrollView ## Basic Information - **Project Name**: aaaaaa_FastScrollView - **Description**: 一个基于ugui 的 高效实用的 ScrollView - **Primary Language**: C# - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 5 - **Forks**: 1 - **Created**: 2023-11-05 - **Last Updated**: 2026-01-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # aaaaaa_FastScrollView #### 介绍 一个使用简单、功能强大、效率实用 基于ugui的ScrollView 垂直滚动(自动对齐边距) 水平滚动(自动对齐边距、间隔) GridView(自动调整行或列的格子数,自动对齐边距、间隔) 高效池缓池 各种效果:树、聊天,动态item, 多种类型item, 跳转,可变大小item,下拉加载等 完整的 C# 源代码 #### 安装教程 1. FastScrollView 复制到unity项目中即可。 #### 说明 在 ScrollView 中 一个个相同的子项,称之为:**Item** ![Item](Image/01.png)


#### 基本使用 1. 在UGUI的 Scroll Rect 组件上,添加 **FastScrollView**脚本。 2. 把 Scroll Rect 组件下的Content中的Item,拖到 FastScrollView脚本 下的 **"M Item Prefab Data List"** 的列表中,如下 ![Item预设](Image/02.png) 3. 使用代码,只需要2步:初始化 与 设置滚动列表item的数量即可。 ``` ... private FastScrollView fastScrollView; ... // 第1步: // 初始化,需要传一个滚动列表刷新item时的回调 fastScrollView.Init(UpdateItem); // index:滚动列表的数据列表下标,从0开始。假如滚动列表长为100,实际界面上显示的item只有7个, index为0~99,并非指界面那7个item中的排序下标。 // obj:item的根GameObject private void UpdateItem(int index, GameObject obj) { ..} // 第2步: // 设置列表数量时,会自动刷新Item, 走 Init 时传的 UpdateItem。 fastScrollView.SetItemCount(100); ```


#### 刷新Item的方式 为了更简单,有且只有一个函数: ``` public void SetItemCount(int count, bool resetPos = false, bool updateItem = true) ``` * **count**:列表item的数量。 * **resetPos**:刷新时是否需要回到初始位置。 * **updateItem**:重设item数量时,是否需要刷新item。 为false的使用场景:在设置数量的同时需要跳转到相应的item ``` // 由于JumpToIndex会刷新item, 设false,可以减少一次刷新 fastScrollView.SetItemCount(100, false, false); fastScrollView.JumpToIndex(50); ```


#### Item的自动对齐边距、间隔(最实用、最常用) 通常滚动列表中item的边距,都是需要手动去调,而美术出的UI可能并没有标注距离边距的具体像素,故处理起来,比较费时,列表item的位置也很难精确到像素级别。 * "M Item Prefab Data List" 列表中的 **Offt Pos** 属性 ![offtPos](Image/03.png) ![offtPos结果](Image/04.png) * **Padding Fit** 属性 ![Padding Fit](Image/05.png) ![Padding Fit](Image/06.png) ![Padding Fit](Image/07.png) 将 **Padding Fit** 打勾后,配合**Offt Pos**为0,即可使前后上下的间隔都保存一致。 ![Padding Fit](Image/08.png) 由于item的间隔很少需要与边距相等,并且列表中,可能含有多种类item,间隔各不相同,所以item间隔不做自动适配了 **垂直的滚动** 同理设置即可


#### 格子类的Item的自动适配行或宽的格子数和对齐边距、间隔(最实用、最常用) * **格子设置如下** ![格子](Image/10.png) **显示效果出下** ![格子](Image/09.png) * **直接修改分辨率,显示效果如下** ![格子](Image/11.png) * **开启自动适配后,效果如下** ![格子](Image/12.png) **所有属性都可独立设置,如只适配左右边距或者只适配格子间隔等**


#### 跳转 1. **瞬间跳转**: ``` public void JumpToIndex(int index, bool isCenter = false) ``` **index**:从0开始,为滚动列表中的item下标。 **isCenter**:false:以开始位置基准对齐;true:以界面中心点位置基准对齐。 两者效果如下: ![13](Image/13.png) ![14](Image/14.png)
2. **动画跳转**: ``` public void MoveToIndex(int index, bool isCenter = false, float speed = 1000f, int multiple = 2) ``` **index与isCenter** 效果同上 **speed**:初始速度,决定了滚动到目标的时间。 可选择的**滚动的缓动动画** 如下图: ![15](Image/15.png) **multiple**:倍数,特别重要的一个参数。 * 值 <1 时:刷新所有从起点到目标点的item。 即若从0到1000时,中间的所有item都会刷新(**不效率**) * 值 >=1 时:为content中能显示出item的数量 X 此值。 用处有2点: 1. 用于判断起点到目标点,是否需要插入临时Item。 (不走UpdateItem回调,只作显示用) (**若插入了item, 只刷新目标点界面所显示的item, 效率**) 2. 用于在起点到目标点插入临时Item的数量。 ------ **例子:** 列表有1000个item, 界面能展示出的item最多有6个,当前位置在0处。倍数为2时: 1. 若目标点与起点,中间间隔,**没有超过** 12 个 item , 那么 MoveToIndex时,过程中的所有item都会刷新,如: MoveToIndex(15, false, 1000f, 2); // 刷新的item为:6至20 2. 若目标点与起点,中间间隔,**超过** 12 个 item ,那么最终只刷新展示的item, 如: MoveToIndex(50, false, 1000f, 2); // 刷新的item为:49~55 **效率** ------ 特别注意:可变大小的item不支持该效果。 另外需要根据不同的界面手动调整**速度**与**倍数**还有**缓动动画**,才能达到自己想要的效果。


#### 一格一格的移动(可实现翻页等效果) 只需要将 **"Is Snap"** 打上勾开启即可。 (不过需要根据自己界面调整相应的参数才有可能达到自己想要的效果) ![16](Image/16.png) * **"is Snap View Center"** : 打勾表示以界面中心点为基准,进行一格一格的移动。 * **"Stop Snap Velocity"** : UGUI的滚动会有加速和减速的过程。 若一直以UGUI的滚动公式,则减速时,可能无法到达目标或超出目标。 故滑动速率小于此值时,开始换成"Scroll Ease Mode"的方式滑向目标。 * **"Snap Next Item Distance Per"** : 值为0~1,为item的百分比。 如0.2时,表示滑动距离超过item的20%的长度,就滑到下一个。 (手指慢慢的划动松开可以试出此效果) * **"Scroll Ease Mode"** :目标最后滑动的滚动公式。 即速度小于 “Stop Snap Velocity” 中的值时,调用。 * **"Snap Duration"** :缓动总时间(秒),最好在0.1~0.5之间。 即 “Scroll Ease Mode” 调用时,使用的总时间。


#### 格子类型列表 注意:只支持单一固定大小的格子 [格子类的Item的自动适配行或宽的格子数和对齐边距、间隔(最实用、最常用)](#格子自动适配) 开启格子类型**Is Grid**打上勾,如下图 ![17](Image/17.png) 其它的与正常列表一样使用即可。


#### Tree类型列表 ![18](Image/18.png) ![19](Image/19.png) 与普通列表,仅仅是多了2步操作: 1. **M Item Prefab Data List** 中存在有2种Item。 2. 在滚动列表初始化时,需要额外设置一个函数: ``` fastScrollView.Init(UpdateItem); fastScrollView.ItemNameByIndexFunc(ItemNameByIndexFunc); // 多了此函数 ... // 当列表有多种类item时,需要通过index取相应的item private string ItemNameByIndexFunc(int index) { // 为 TitleItem 或者 SubItem (上面图,item 名字) return itemDataList[index].itemName; } ```


#### 更多种类Item列表 效果如下: ![20](Image/20.png) 与 **Tree类型列表** 一样,只是点击时,没有展开、收缩的效果,Item的种类也更多(没有数量限制)


#### Item是可变大小的列表(如聊天等) 效果如下: ![21](Image/21.png) 与普通列表一样,仅仅需要将 **Item Not Fix Size** 打勾即可 特别注意:Item需要特定的对齐方式 比如: ScrollType为 TopToBottom时,item必须顶对齐,如:![22](Image/22.png) ScrollType为 BottomToTop时,item必须低对齐,如:![23](Image/23.png)


#### 各种回调(可自行实现动态加载,下拉加载等) * 滚动停止回调。 ``` public void SetOnScrollStop(Action action) ``` (**停下来,可以判断距离尾部的区间大小,实现动态加载**)

* 滚动超出初始位置时回调 ``` public void SetOnScrollExceedStart(Action action) ```

* 滚动超出结束位置时回调 ``` public void SetOnScrollExceedEnd(Action action) ``` (**下拉加载可在此回调增加相应逻辑**)

* 当焦点item index改变时回调 ``` public void SetOnFocusIndexChange(Action action, bool isCenter = false) ``` **isCenter** 是否是以界面中心点为基准

* 滚动变化回调 ``` public void SetOnScrollValueChange(Action action) ``` * 更多的回调。。。


#### 各种实例演示列表 * **Example/Base/Base.Unity**:基本用法,调转,移动,刷新等 * **Example/Chat/Chat.Unity**:聊天 * **Example/Multiple/Multiple.Unity**:不同种类的item * **Example/Snap/Snap.Unity**:一格一格的滑动 * **Example/Tree/Tree.Unity**:树状的列表