分享一个自己写的scrollview面板复用的优化组件

1019104728 · 2020年06月12日 08:07

项目地址：https://gitee.com/kexilu/ScrollView.git

这个组件可以单行的横向和纵向，也可以多行多列的横向或纵向，类似上图。

我知道论坛有很多大佬有这个组件的优化，奈何本人实力太弱，看不懂各位大佬的代码逻辑，只能凭自己的粗略手段完成了这个组件的优化，肯定会有很多我没发现的问题，欢迎各位大佬提出宝贵优化意见

1878522696 · 2020年06月12日 08:08

大佬牛皮

1019104728 · 2020年06月12日 08:29

https://gitee.com/kexilu/ScrollView.git

第一次发，居然不会发链接QWQ，补上

ceilwoo · 2020年06月12日 11:50

大佬写个使用说明

1019104728 · 2020年06月13日 00:58

哦，好的好的，一会补上说明

1019104728 · 2020年06月13日 01:53

ScrollViewManager说明文档

从git上拉下来的文件里一共有三个脚本，一个场景，如图所示

ItemPanelController.ts
这个脚本是所有子面板的父类控制脚本，根据不同的ScrollView肯定会有不同的子面板，所以所有的子面板的控制脚本可以继承这个脚本，方便ScrollViewManager.ts中更新面板信息的方法有效进行【当然你可以自己定制自己的控制脚本，随后会说如何更改】。

Test.ts
是挂在场景demo里的实例，如果有本章说明不清楚不明白的，可以看实例或者直接问我。

ScrollViewManager.ts
组件核心，挂载在官方Scroll View组件下

如图
ScrollView组件中的ScrollEvent请挂载OnScrollEvent方法该方法在ScrollViewManager脚本中

属性说明：
【Division】，分裂数量，如果为1，就是单行或者单列，如果为3，就是三行或者三列。

Division=3,

Division=1。
Countent的位置默认在正中心。
【Panel_Index】,子面板的预制或者节点都可以直接拖进去，这个面板就是向里面填充的面板。Countent的大小会根据这个面板的属性进行自动计算调解。
【CutTop---->CutRight】，这四个属性就是子面板与countent面板直接的间隙。Coutent的大小会因为这四个属性有关联。
【Interval_X,Interval_Y】，面板与面板之间的间隙，Countent的大小会因为这个属性有关联。
【MaxPanel】，场景中子面板最大展示数量，ps：脚本中会自动计算最合适的最大面板数量。在ResetPanelSize()方法下，在此处注销或修改数值可以更改最大面板数量，[默认值为面板所能展示的数量+继续扩充两列的数量]。

【ViewType】，ScrollView模式，1为横屏。2为竖屏。
【CountentType】，Countent模式。1为ToptToBottom/LeftToRight。2为BottomToTop/RightToLeft。

如图四种模式。初始位置会自动固定在起始位置。

可调用方法：
ResetPanel(),可以将面板初始化至开始，数值不会更新。如果没有数据更新，可以调用这个方法。
SetScroll(item:any[],controller),设置子面板属性的方法，
@item:子面板属性数组，也相当于该组件要初始化面板的重要数据，也是中途刷新子面板的关键数据。
@controller:子面板控制方法
OnStartPanel(),开始脚本，在SetScroll()方法后执行。会根据SetScroll()方法传入的值，初始化ScrollView面板属性。
OnResetPanel()，可以将面板初始化至开始，数值会发生改变。在SetScroll()方法后执行。会根据SetScroll()方法传入的值，初始化ScrollView面板属性。

1019104728 · 2020年06月13日 01:54

说明文档已经补充，请更新一下代码，有部分逻辑上的修改，说明文档也放进了git中，更新后就有了

422925515 · 2020年07月15日 08:18

很棒，建议再加个跳转到目标index的接口：
随手写了一下，
先算出跳转targetIndex的Offset：

// 目标item的index
GetTargetIndexOffset: function(targetIndex){
    var index = targetIndex;
    var x = (this.ViewType == 1 && this.CountentType == 1) ? this.PanelIndexPositionList[index][0] : (this.ViewType == 1 && this.CountentType == 2) ? -this.PanelIndexPositionList[index][0] : this.PanelIndexPositionList[index][0];
    return x - this.__Scrollview.node.width/2;
},

在offset改变的情况下，重设一下位置和更新item：

// 
ToIndex: function(targetIndex) {
    var child = this.CountentPanel.children;
    // 显示问题
    for (var i = 0; i < child.length; i++) {
        var index = targetIndex + i;
        var _panel = child[i];
        _panel.x = (this.ViewType == 1 && this.CountentType == 1) ? this.PanelIndexPositionList[index][0] : (this.ViewType == 1 && this.CountentType == 2) ? -this.PanelIndexPositionList[index][0] : this.PanelIndexPositionList[index][0];
        _panel.y = (this.ViewType == 2 && this.CountentType == 1) ? -this.PanelIndexPositionList[index][1] : (this.ViewType == 2 && this.CountentType == 2) ? this.PanelIndexPositionList[index][1] : this.PanelIndexPositionList[index][1];
        this.ItemAssignment(_panel, this.ItemMsgList[index]);
    }
},