EnhancedScroller的使用

image-20230707110146287

EnhancedScroller是一个加强版本的滚动区域组件，可以改善滚动条的性能并实现例如无限滚动的效果。

简单示例

创建一个滑动区域：

image-20230707134942227

  • 滑动区域需要3个部分：滑动区域、滚动条、Mask

image-20230707135435704

可以使用Rect Mask 2D 替代Mask获得更好效果

列表内容都需要继承EnhancedScrollerCellView

PersonItem
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class PersonItem: EnhancedScrollerCellView
{
    private TextMeshProUGUI _text;
    private PersonModel _model;

    private Button _button;

    private void Awake()
    {
        _text = GetComponentInChildren<TextMeshProUGUI>();
        _button = GetComponent<Button>();
    }

    public void SetData(PersonModel model)
    {
        _model = model;

        _text.text = _model.Name;
    }
}

列表需要实现IEnhancedScrollerDelegate接口

PersonList
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
public class PersonList : MonoBehaviour,IEnhancedScrollerDelegate
{
   private EnhancedScroller _enhancedScroller;

   private List<PersonModel> _list = new List<PersonModel>();
   
   public EnhancedScrollerCellView cellViewPrefab;
   

   private void Awake()
   {
      _enhancedScroller = GetComponent<EnhancedScroller>();
   }

   private void Start()
   {
       //需要在Start方法中，设定委托对象为当前
      _enhancedScroller.Delegate = this;
      for (int i = 0; i < 30; i++)
      {
         _list.Add(new PersonModel(){Name = "AAA"+i});
      }
       //装载初始化对象
      _enhancedScroller.ReloadData();
   }

   //数据个数
   public int GetNumberOfCells(EnhancedScroller scroller)
   {
      return _list.Count;
   }

   //每个子项目的大小
   public float GetCellViewSize(EnhancedScroller scroller, int dataIndex)
   {
      return 30;
   }

    //创建初始化一个子项目
   public EnhancedScrollerCellView GetCellView(EnhancedScroller scroller, int dataIndex, int cellIndex)
   {
      //创建一个子项
      var cellView = scroller.GetCellView(cellViewPrefab) as PersonItem;
      cellView.name = "cell " + dataIndex;
      
      
      cellView.SetData(_list[dataIndex]);
      
      return cellView;
   }
}

效果展示

动画

如上所示：当我滚动列表时，左侧列表也会随之变化，重复使用对象。

无限循环列表

image-20230707141151672

勾选此选项可以开启无限循环模式，在这个模式下，可以无限滑列表。

动画

无限循环列表效果

跳转位置

动画

1
2
3
4
5
if (int.TryParse(keyTex.text, out var data))
           {
               data = Mathf.Clamp(data, 0, _list.Count);
               _enhancedScroller.JumpToDataIndex(data, tweenTime: 0.5f, tweenType: EnhancedScroller.TweenType.easeInSine);
           }

说明

除此之外，插件还支持例如：下拉加载、多种类子项、Gird布局等。。。

在使用几百个下拉项时，Unity自带的滚轮区域会卡顿，特别是在初始化时会造成峰值，使用此插件可以避免这种情况😄.