跳到主要内容

ScrollView Variants

重要 注意 提醒

Coding Style wiki​

InfiniteScrollView 内置 4 种实现 (皆继承 InfiniteScrollView)，将对应组件挂载至 ScrollRect 对象上并指定 cellPrefab 即可使用；初始、数据操作、刷新、滚动与 Snap 等共用 API 详见基类页面。

命名空间OxGKit.InfiniteScrollView
类型VerticalInfiniteScrollView、HorizontalInfiniteScrollView、VerticalGridInfiniteScrollView、HorizontalGridInfiniteScrollView (皆继承 InfiniteScrollView)
源码VerticalInfiniteScrollView.cs、HorizontalInfiniteScrollView.cs、VerticalGridInfiniteScrollView.cs、HorizontalGridInfiniteScrollView.cs
using OxGKit.InfiniteScrollView;

快速上手​

实现总览​

实现排列方式专属成员
VerticalInfiniteScrollView垂直列表 (上下滚动)spacing (float)
HorizontalInfiniteScrollView水平列表 (左右滚动)spacing (float)
VerticalGridInfiniteScrollView垂直网格 (上下滚动)spacing (Vector2)、columnCount
HorizontalGridInfiniteScrollView水平网格 (左右滚动)spacing (Vector2)、rowCount
using Cysharp.Threading.Tasks;
using OxGKit.InfiniteScrollView;
using UnityEngine;

public class GridLauncher : MonoBehaviour
{
    public VerticalGridInfiniteScrollView gridScrollView;

    private async void Start()
    {
        // 网格设置 (亦可于 Inspector 配置)
        this.gridScrollView.columnCount = 4;
        this.gridScrollView.spacing = new Vector2(10f, 10f);

        await this.gridScrollView.InitializePool();

        for (int i = 0; i < 500; i++)
            this.gridScrollView.Add(new InfiniteCellData(new Vector2(100f, 100f), i));
        this.gridScrollView.Refresh();
    }
}

通用规则​

  • 4 种实现的差异仅在排列计算与专属成员，数据操作、刷新与 Snap 等 API 皆共用基类行为。
  • 列表不会自动配置 ScrollRect 的滚动轴向，请自行将 ScrollRect 的 Vertical / Horizontal 勾选与所用实现对应。

注意 Grid 实现以每一排第一条数据的 cellSize 推进排列与 content 尺寸计算，建议 Grid 使用一致的 cellSize (动态尺寸适用于 Vertical / Horizontal 列表)。

VerticalInfiniteScrollView​

垂直无限列表 (上下滚动)，适用排行榜、聊天室等纵向列表。

类型public class VerticalInfiniteScrollView : InfiniteScrollView
源码VerticalInfiniteScrollView.cs
成员说明
public float spacingCell 的垂直间距。

覆写行为

public override void Snap(int index, float duration)
public override bool Remove(int index, bool refresh = true)
  • Snap：依 snapAlign 累计 cellSize.y + spacing 计算垂直目标位置 (content 高度小于 viewport 无法滚动时不动作)。
  • Remove：移除后会将 content 位置回移一格 (cellSize.y + spacing)，避免移除当下的视觉跳动。

HorizontalInfiniteScrollView​

水平无限列表 (左右滚动)，适用卡片列、横向菜单等横向列表。

类型public class HorizontalInfiniteScrollView : InfiniteScrollView
源码HorizontalInfiniteScrollView.cs
成员说明
public float spacingCell 的水平间距。

覆写行为

public override void Snap(int index, float duration)
public override bool Remove(int index, bool refresh = true)
  • Snap：依 snapAlign 累计 cellSize.x + spacing 计算水平目标位置 (content 宽度小于 viewport 无法滚动时不动作)。
  • Remove：移除后会将 content 位置回移一格 (cellSize.x + spacing)。

提醒 页签分页 (TabPage) 应用可以水平列表搭配 Snap 进行页面切换 (参考 Samples 的 Infinite TabPage Demo，详见模块介绍)。

VerticalGridInfiniteScrollView​

垂直网格无限列表 (上下滚动)，每一横排并排 columnCount 个 Cell，适用背包、商店等网格列表。

类型public class VerticalGridInfiniteScrollView : InfiniteScrollView
源码VerticalGridInfiniteScrollView.cs
成员说明
public Vector2 spacingCell 间距 (x = 水平、y = 垂直)。
public int columnCount列数 (每一横排并排的 Cell 数量)，默认 1 (小于等于 0 时自动视为 1)。

覆写行为

public override void Snap(int index, float duration)
  • Snap：依目标索引所在的排数 (index / columnCount) 计算垂直目标位置。

注意 columnCount 于 v1.7.1 由 columeCount 更名 (拼写修正)，已标注 FormerlySerializedAs，旧场景 / Prefab 的序列化数据会自动迁移。

HorizontalGridInfiniteScrollView​

水平网格无限列表 (左右滚动)，每一竖排并排 rowCount 个 Cell。

类型public class HorizontalGridInfiniteScrollView : InfiniteScrollView
源码HorizontalGridInfiniteScrollView.cs
成员说明
public Vector2 spacingCell 间距 (x = 水平、y = 垂直)。
public int rowCount行数 (每一竖排并排的 Cell 数量)，默认 1 (小于等于 0 时自动视为 1)。

覆写行为

public override void Snap(int index, float duration)
  • Snap：依目标索引所在的排数 (index / rowCount) 计算水平目标位置。