WuXia/assets/Scripts/CComEx/FrameScrollView.ts

import { _decorator, Component, ScrollView, Prefab, instantiate, Layout, Node, UITransform, Enum } from "cc";
const { ccclass, property ,menu} = _decorator;

export enum  RenderType{
    Node,
    Prefab,
}


@ccclass
@menu("滑动列表/分帧加载")
export default class FrameScrollView extends Component{

    @property(ScrollView)
    m_OpenList: ScrollView = null;
    @property({type:Enum(RenderType)})
    mRenderType:RenderType = RenderType.Node;
    @property({ type: Node, displayName: "渲染预设节点", visible: function () { return this.mRenderType == RenderType.Node } })
    m_RendererItem: Node = null;
    @property({ type: Prefab, displayName: "渲染预设节点", visible: function () { return this.mRenderType == RenderType.Prefab } })
    m_RendererPerfab: Prefab = null;
    /**参数1  index  参数2 渲染的物体 */
    m_ItemRendererFuntion: (index: number, Item: Node) => void = null;
    m_ItemClick: Function;
    private _ItemCount: number = 0;
    private ChildItemList: Node[] = [];
    private curFrame:number = 0;
    public MaxFrame:number = 2;

    ClearAll(){
        this.m_OpenList.content.removeAllChildren();
        this.ChildItemList = [];
        this.renderIndex = 0;
    }
    //private RenderCount:number = 0;

    renderIndex:number = 0;

    getChildItem(index:number){

        if(index<this.ChildItemList.length){
            return this.ChildItemList[index];
        }
        return null;
    }

    get m_ItemCount():number{
        return this._ItemCount;
    }

    set m_ItemCount(value:number){
       this._ItemCount = value;
       this.SetRendererListItem();
    }

    LookAtIndex(idnex:number){
        if(this.m_OpenList.content.getComponent(UITransform).height > this.m_OpenList.node.getComponent(UITransform).height && this.ChildItemList[idnex]){
            let prcent = 1 - (Math.abs(this.ChildItemList[idnex].position.y) - this.ChildItemList[idnex].getComponent(UITransform).height) / this.m_OpenList.content.getComponent(UITransform).height;
            this.m_OpenList.scrollToPercentVertical(prcent);
        }
    }

    getitemByindex(idnex: number) {
        if (idnex < this.ChildItemList.length) {
            return this.ChildItemList[idnex];
        }
        return null;
    }

    private createItem(){
        return this.mRenderType == RenderType.Node? instantiate(this.m_RendererItem):instantiate(this.m_RendererPerfab);
    }

    protected update(dt: number): void {

        this.curFrame++;
        if (this.curFrame < this.MaxFrame) { return; }
        this.curFrame = 0;

        if (this.renderIndex < this._ItemCount) {
            if (!this.ChildItemList[this.renderIndex]) {
                let Item:Node = this.createItem();
                Item.active = true;
                this.ChildItemList.push(Item);
                this.m_OpenList.content.addChild(Item);
                this.m_OpenList.content.getComponent(Layout)?.updateLayout();
                this.m_ItemClick && CNodeUtils.addBtnComponent(Item, this.m_ItemClick.bind(this, this.renderIndex, Item))
            }
            this.ChildItemList[this.renderIndex].active = true;
            this.m_ItemRendererFuntion && this.m_ItemRendererFuntion(this.renderIndex, this.ChildItemList[this.renderIndex]);
            ++this.renderIndex;
        }
        
        let TempStarIndex = this._ItemCount;
        for (; TempStarIndex < this.ChildItemList.length; TempStarIndex++) {
            if (this.ChildItemList[TempStarIndex].active) {
                this.ChildItemList[TempStarIndex].active = false;
            } else {
                break;
            }
        }
    }

    SetRendererListItem() {
        this.renderIndex = 0;
        for (let i = 0; i < this._ItemCount; i++) {
            if (i < this.ChildItemList.length) {
                if (!this.ChildItemList[i].active) {
                    this.ChildItemList[i].active = true;
                }
                this.m_ItemRendererFuntion && this.m_ItemRendererFuntion(i, this.ChildItemList[i]);
                ++this.renderIndex;
            } else {
                break;
            }
        }
    }

}