ClientFrameWork/assets/script/utils/ScrollFinal.ts

/** 
 * @Author  huangxin 
 * @ctime   2020-06-10
 * @Version 
 *      ScrollFinal1.0   2020-06-10 beta升级，使用挂载预制体
 *      ScrollFinal1.1   2020-08-11 新增对象池类大法
 *      ScrollFinal1.2   2020-08-17 1.新增延迟刷新item，防止在某一帧生成过量item导致卡顿的问题
 *                                  2.初始的控件属性设置(init方法)改为由initScrollView触发(原本的onLoad触发在适配模式下会不准确)
 *      ScrollFinal1.3   2021-05-26 现在的滚动节点不需要手动添加scrollView组件了
 *      ScrollFinal1.4   2022-04-14 现在可以在初始化或refresh时,立刻滚动到某个位置了
 *      ScrollFinal1.5   2023-06-22 新增 adapterItem , 可在index首次出现时设定它的高度(后续把动态修改补上)
 * @Tips
 *      复用滚动轴 用来减少drawcall
 *      与cc.ScrollView组件一同挂载在一个节点上
 *      item挂载的脚本必须添加setData方法，用来传递数据
 *      item锚点应该在中心
 *      目前Grid类型只支持从左上到右下模式(垂直滚动)，其他奇葩模式自己搞定
 *      滚动轴的锚点必须放在滚动列表的起始位置(比如背包grid模式在左上角，成就列表在左上角)
 * 
 * @adapterItem  item如有不定高度时,编辑器中设定的item需要为最小高度,确保instance的个数最大值是正确的
 *      支持不规则高度item 谨用,有缺陷:
 *      1.同一个item再次设置不同高度时会出现问题(若要修改,需要做一个链表来关联前后item)
 *      2.仅支持垂直和水平模式,背包模式不支持(水平模式未测试)
 */

import { gameMethod } from "../common/gameMethod";
import { CC_NODE_EVENT } from "../data/const/TypeConst";
import ScrollInner from "./ScrollInner";
import ScrollOut from "./ScrollOut";

// 对象池类型
let PoolEnum = cc.Enum({
    /**通用道具 */
    ITEM_BASE: 0,
    /**背包道具 */
    ITEM_BAG: 1,
    // /**合成道具 */
    // ITEM_COMPOSE: 2,
})

// 滚动类型
let ScrollDirEnum = cc.Enum({
    /**垂直*/
    VERTICAL: 0,
    /**水平*/
    HORIZONTAL: 1,
    /**背包*/
    GRID: 2
})

// 滚动类型
let ScrollOutInner = cc.Enum({
    /**外层scroll*/
    DEFAULT: 0,
    /**外层scroll*/
    OUT: 1,
    /**内层scroll*/
    INNER: 2,
})

interface AdapterList {
    x: number,
    y: number,
    width: number,
    height: number
}

type ItemList = { index: number, node: cc.Node }

const { ccclass, property, menu } = cc._decorator;
@ccclass
@menu('Scroll/ScrollFinal')
export default class ScrollFinal extends cc.Component {
    // @property(cc.ScrollView)
    // scroll: cc.ScrollView | null = null
    @property({
        tooltip: "使用对象池"
    })
    useNodePool: boolean = false
    @property({
        type: PoolEnum,
        visible: function () { return this.useNodePool },
        tooltip: "对象池类型"
    })
    private poolType = PoolEnum.ITEM_BASE

    @property({
        type: ScrollDirEnum,
        visible: () => {
            return true
        },
        tooltip: "滚动类型"
    })
    private scrollDir = ScrollDirEnum.VERTICAL  // 滚动类型

    @property({
        type: ScrollOutInner,
        tooltip: "0=>常规scroll\n1=>外层scroll\n2=>内层scroll"
    })
    private outInner = ScrollOutInner.DEFAULT

    @property({ tooltip: "与滚动层的边界-左" })
    padingX: number = 10
    @property({ tooltip: "与滚动层的边界-上" })
    padingY: number = 10
    @property({ tooltip: "与滚动层的边界-下" })
    padingY2: number = 0
    @property({
        visible: function () { return this.scrollDir != ScrollDirEnum.VERTICAL }, tooltip: "item行间距"
    })
    spacingX: number = 20
    @property({
        visible: function () { return this.scrollDir != ScrollDirEnum.HORIZONTAL }, tooltip: "item列间距"
    })
    spacingY: number = 20

    @property(cc.Prefab)
    itemPrefab: cc.Prefab = null    // item资源加载地址
    @property
    itemScript: string = "" // item挂在的脚本名
    @property
    itemScale: number = 1    // item缩放比例

    @property({
        tooltip: "是否开启滚动惯性"
    })
    inertia: boolean = true
    @property({
        tooltip: "开启惯性后,在用户停止触摸后滚动多块停止,0表示永不停止,1表示立即停止",
        visible: function () { return this.inertia == true },
    })
    brake: number = 0.75
    @property({
        tooltip: "是否允许滚动内容超过边界,并在停止触摸后回弹"
    })
    elastic: boolean = true
    @property({
        tooltip: "滚动行为是否会取消子节点上注册的触摸事件",
    })
    cancelInnerEvents: boolean = true

    @property({
        tooltip: "不支持背包,默认不激活", // 激活后,无法在初始化时直接滚动到未展示过的index标签位置,即 scrollToIndexNow会受到限制
        displayName: "不固定item尺寸"
    })
    adapterItem: boolean = false
    adapterList: { [idx: string]: AdapterList } = {} // 记录适配的坐标列表
    adapterContentLength: number = 0 // 激活适配后的content高度




    // @property({
    //     tooltip: "启动widget模式(注意激活后不可与原生cc.widget同时使用)"
    // })
    // useWidget: boolean = false

    // @property({ tooltip: "适配顶部", visible: function () { return this.useWidget == true } })
    // useAlignTop: boolean = false
    // @property({ tooltip: "距离父节点顶部", visible: function () { return this.useAlignTop == true } })
    // widgetTop: number = 0
    // @property({ tooltip: "适配底部", visible: function () { return this.useWidget == true } })
    // useAlignBottom: boolean = false
    // @property({ tooltip: "距离父节点底部", visible: function () { return this.useAlignBottom == true } })
    // widgetBottom: number = 0
    // @property({ tooltip: "适配左侧", visible: function () { return this.useWidget == true } })
    // useAlignLeft: boolean = false
    // @property({ tooltip: "距离父节点左侧", visible: function () { return this.useAlignLeft == true } })
    // widgetLeft: number = 0
    // @property({ tooltip: "适配右侧", visible: function () { return this.useWidget == true } })
    // useAlignRight: boolean = false
    // @property({ tooltip: "距离父节点右侧", visible: function () { return this.useAlignRight == true } })
    // widgetRight: number = 0

    @property({
        tooltip: "展示生产动画\n0->不展示\n1->缩放动画\n2->x方向压扁拉伸\n3->y方向压扁拉伸\n4->慢缩放"
    })
    showAnim: number = 0
    @property({
        tooltip: "单个动画播放速度\n最佳播放速度参考：\n缩放动画->0.1\nx方向压扁拉伸->0.1\ny方向压扁拉伸->0.25\n慢缩放->0.3"
    })
    animSpeed: number = 0.15
    @property({
        tooltip: "创建item的延迟时间,设为0则为每帧生成。\n注意:在所有item刷新完之前,scroll组件的滚动功能将被关闭"
    })
    ctime: number = 0
    @property({
        tooltip: "每帧生成item的个数"
    })
    cnumber: number = 1

    scrollView: cc.ScrollView | ScrollOut | ScrollInner
    mask: cc.Node
    content: cc.Node

    isScrollUp: boolean = false       // 当前往哪个方向滚动   左和上是true
    private _itemDataList: any[] = []   // 当前显示阵营的所有数据
    private extraParams: any[] = []     // 额外数据
    private itemList: ItemList[] = []   // 实例化的item列表

    private instantiateCount: number = 0    // item实例化数量
    private hangCount: number = 0           // 行个数
    private lieCount: number = 0            // 列个数
    private itemDistanceX: number = 0       // item中心点之间的距离
    private itemDistanceY: number = 0       // item中心点之间的距离
    private scrollMaxOffsetX: number = 0    // 最大可滚动区域X
    private scrollMaxOffsetY: number = 0    // 最大可滚动区域Y
    private scrollIndex: number = -1         // scroll参数

    private lastScrollPos: number = 0       //上一次的滚动位置
    private curScrollPos: number = 0        // 当前滚动位置

    private itemWidth: number = 10  // item宽度
    private itemHeight: number = 10 // item高度

    private tagLang: number = 0
    private tagIndex: number = -999 // 999 表示清0状态，此时无【插入标签】,-1表示标签置顶，其他即当前标签的下方(右侧)显示

    private canCreateItem: boolean = false  // 可以生成item
    private createIndex: number = 0 // 生成item的数据标签
    private life: number = 0 // 生成item的时间
    private baseIndex: number = 0 // 基础标签位置

    private hasInit: boolean = false

    onLoad() {
        // if (this.node.getComponent(cc.ScrollView) != null) {
        //     console.error("滚动节点无需挂载scrollView组件了")
        //     return
        // }
        this.init()
    }

    resetSize() {
        if (this.mask) {
            this.mask.setContentSize(this.node.getContentSize())
        }
        if (this.content) {
            // this.content.setContentSize(this.node.getContentSize())
            this.setScrollContentSize()
        }
        this.setInstantCount()
    }

    private init() {
        if (this.hasInit) { return }
        /////////////// 构建滚动轴 ///////////////
        this.scrollView = this.outInner == ScrollOutInner.DEFAULT ? this.addComponent(cc.ScrollView) :
            this.outInner == ScrollOutInner.OUT ? this.addComponent(ScrollOut) : this.addComponent(ScrollInner)
        // this.scrollView = this.addComponent(cc.ScrollView)
        this.scrollView.horizontal = this.scrollDir == ScrollDirEnum.HORIZONTAL
        this.scrollView.vertical = this.scrollDir != ScrollDirEnum.HORIZONTAL
        this.scrollView.inertia = this.inertia
        this.scrollView.brake = this.brake
        this.scrollView.elastic = this.elastic
        this.scrollView.cancelInnerEvents = this.cancelInnerEvents
        /////////////// 检测是否需要重新适配 ///////////////
        if (this.node.getComponent(cc.Widget)) {
            this.node.getComponent(cc.Widget).updateAlignment()
        }

        /////////////// 构建滚动遮罩 ///////////////
        this.mask = new cc.Node()
        this.mask.parent = this.node
        this.mask.name = "scrollMask"
        this.mask.setContentSize(this.node.getContentSize())
        this.mask.addComponent(cc.Widget)
        this.mask.getComponent(cc.Widget).isAlignTop = true
        this.mask.getComponent(cc.Widget).isAlignBottom = true
        this.mask.getComponent(cc.Widget).top = 0
        this.mask.getComponent(cc.Widget).bottom = 0

        this.mask.addComponent(cc.Mask)
        this.mask.getComponent(cc.Mask).type = cc.Mask.Type.RECT
        this.mask.anchorX = this.node.anchorX
        this.mask.anchorY = this.node.anchorY
        this.mask.x = 0
        this.mask.y = 0
        // widget不需要加了
        // let maskWidget = mask.addComponent(cc.Widget)
        // maskWidget.isAlignTop = true
        // maskWidget.isAlignBottom = true
        // maskWidget.isAlignLeft = true
        // maskWidget.isAlignRight = true
        // maskWidget.top = 0
        // maskWidget.bottom = 0
        // maskWidget.left = 0
        // maskWidget.right = 0
        /////////////// 构建滚动内容器 ///////////////
        this.content = new cc.Node()
        this.content.parent = this.mask
        this.content.name = "scrollContent"
        this.scrollView.content = this.content
        this.content.setContentSize(this.node.getContentSize())
        this.content.anchorX = this.node.anchorX
        this.content.anchorY = this.node.anchorY
        this.content.x = 0
        this.content.y = 0

        this.hasInit = true


        this.itemWidth = this.itemPrefab.data.getContentSize().width
        this.itemHeight = this.itemPrefab.data.getContentSize().height


        // SCROLL_BOUNCE_BOTTOM = 'bounce-bottom',//滚动视图滚动到顶部边界并且开始回弹时发出的事件
        // SCROLL_BOUNCE_LEFT = 'bounce-left',//滚动视图滚动到底部边界并且开始回弹时发出的事件
        // SCROLL_BOUNCE_RIGHT = 'bounce-right',//滚动视图滚动到左边界并且开始回弹时发出的事件
        // SCROLL_BOUNCE_TOP = 'bounce-top',//滚动视图滚动到右边界并且开始回弹时发出的事件

        this.scrollView.node.on(CC_NODE_EVENT.SCROLLING, this.onScroll, this)
        this.scrollView.node.on(CC_NODE_EVENT.SCROLL_BEGAN, this.onScrollBegan, this)
        this.scrollView.node.on(CC_NODE_EVENT.SCROLL_BOUNCE_TOP, this.onBounceTop, this)
        this.scrollView.node.on(CC_NODE_EVENT.SCROLL_BOUNCE_BOTTOM, () => { }, this)
        this.scrollView.node.on(CC_NODE_EVENT.SCROLL_BOUNCE_LEFT, () => { }, this)
        this.scrollView.node.on(CC_NODE_EVENT.SCROLL_BOUNCE_RIGHT, () => { }, this)
        this.scrollView.node.on(CC_NODE_EVENT.SCROLL_BOUNCE_TOP, () => { }, this)
        this.itemDistanceX = this.realItemWidth + this.spacingX
        this.itemDistanceY = this.realItemHeight + this.spacingY

        this.setInstantCount()

        // //看下有没有不应该有的组件
        // // Layout
        // if (this.scrollView.content.getComponent(cc.Layout)) {
        //     console.error("scrollFinal 与 layout 冲突,清删除 content 中的 layout 组件")
        // }
        // // Widget
        // if (this.scrollView.node.getComponent(cc.Widget)) {
        //     if (this.scrollView.node.getComponent(cc.Widget).isAlignTop &&
        //         this.scrollView.node.getComponent(cc.Widget).isAlignBottom) {
        //         console.error("不能用widget做长度适配(因为Widget的延迟),只可用作坐标适配")
        //     }
        // }
    }
    private setInstantCount() {
        if (this.scrollView == null) {
            return
        }
        switch (this.scrollDir) {
            case ScrollDirEnum.VERTICAL:
                this.hangCount = 1
                this.lieCount = Math.ceil(this.scrollView.node.height / (this.itemDistanceY)) + 1
                this.instantiateCount = this.lieCount
                break
            case ScrollDirEnum.HORIZONTAL:
                this.hangCount = Math.ceil(this.scrollView.node.width / (this.itemDistanceX)) + 1
                this.lieCount = 1
                this.instantiateCount = this.hangCount
                break
            case ScrollDirEnum.GRID:
                this.hangCount = Math.floor(this.scrollView.node.width / (this.itemDistanceX))
                this.lieCount = Math.ceil(this.scrollView.node.height / (this.itemDistanceY)) + 1
                this.instantiateCount = this.hangCount * this.lieCount
                break
        }
    }

    initScrollView(list: any[] = [], ...args: any[]) {
        // this.scheduleOnce(() => {
        this.init()
        this.clear()
        this.clearTag()
        this.adapterList = {}
        this.itemDataList = list
        this.extraParams = args
        if (this.outInner == ScrollOutInner.OUT) {
            this.extraParams.push(this.scrollView)
        }
        this.scrollView.stopAutoScroll()
        this.showUI()
        // }, 0)
    }

    set itemDataList(list: any[]) {
        this._itemDataList = list
        if (!this.adapterItem) {
            return
        }
        // 适配模式,需要去掉记录的信息
        let newAdapterList: { [idx: string]: AdapterList } = {}
        for (let index = 0; index < list.length; index++) {
            if (this.adapterList[index]) {
                newAdapterList[index] = this.adapterList[index]
            }
        }
        this.adapterList = newAdapterList
        switch (this.scrollDir) {
            case ScrollDirEnum.VERTICAL:
                this.adapterContentLength = 0
                for (const idx in this.adapterList) {
                    this.adapterContentLength = Math.max(Math.abs(this.adapterList[idx].y) + this.adapterList[idx].height / 2)
                }
                break
            case ScrollDirEnum.HORIZONTAL:
                this.adapterContentLength = 0
                for (const idx in this.adapterList) {
                    this.adapterContentLength = Math.max(this.adapterList[idx].x + this.adapterList[idx].width / 2)
                }
                break
        }
    }
    get itemDataList(): any[] {
        return this._itemDataList
    }

    private getPositionInView(item: cc.Node): { x: number, y: number } {
        if (this.scrollView == null) { return cc.v2(0, 0) }
        let worldPos = item.parent.convertToWorldSpaceAR(item.position);
        let viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos);
        return viewPos;
    }
    private onBounceTop() {
        switch (this.scrollDir) {
            case ScrollDirEnum.HORIZONTAL:
                break
            case ScrollDirEnum.VERTICAL:
            case ScrollDirEnum.GRID:
                this.checkScrollState()
                if (this.adapterItem) {
                    // @TODO
                }
                break
        }
        this.scrollIndex = -1
    }
    private onScroll() {
        this.curScrollPos = 0
        if (this.scrollDir == ScrollDirEnum.HORIZONTAL) {
            this.curScrollPos = this.scrollView.getScrollOffset().x
            this.isScrollUp = this.curScrollPos < this.lastScrollPos
        } else {
            this.curScrollPos = this.scrollView.getScrollOffset().y
            this.isScrollUp = this.curScrollPos > this.lastScrollPos
        }
        this.lastScrollPos = this.curScrollPos

        if (this.scrollView == null) { return }

        this.itemList.forEach(ele => {
            this.tryResetItem(ele)
        })
    }

    private tryResetItem(ele: ItemList) {
        switch (this.scrollDir) {
            case ScrollDirEnum.HORIZONTAL:
                if (this.curScrollPos >= 0 || this.curScrollPos <= this.scrollMaxOffsetX) {
                    return
                }
                break
            case ScrollDirEnum.VERTICAL:
            case ScrollDirEnum.GRID:
                if (this.curScrollPos <= -this.realItemHeight / 2 || this.curScrollPos >= this.scrollMaxOffsetY + this.realItemHeight / 2) {
                    return
                }
        }
        let scrollWidth = this.scrollView.node.width
        let scrollHeight = this.scrollView.node.height
        let element = ele.node
        switch (this.scrollDir) {
            case ScrollDirEnum.HORIZONTAL:
                if (this.isScrollUp && this.getPositionInView(element).x < -(scrollWidth * this.node.anchorX + ele.node.width / 2)) {
                    // 超出左边界显示区域
                    let idx = ele.index + this.instantiateCount
                    if (idx < this.itemDataList.length) {
                        this.setItemData(element, this.itemDataList[idx], idx)
                        // element.x = element.x + this.hangCount * ele.node.width
                        ele.index = idx
                        this.setPosX(idx, element)
                    }
                } else if (!this.isScrollUp && this.getPositionInView(element).x > scrollWidth * (1 - this.node.anchorX) + ele.node.width / 2) {
                    // 超出右边界显示区域
                    let idx = ele.index - this.instantiateCount
                    if (idx >= 0) {
                        this.setItemData(element, this.itemDataList[idx], idx)
                        // element.x = element.x - this.hangCount * ele.node.width
                        ele.index = idx
                        this.setPosX(idx, element)
                    }
                }
                break
            case ScrollDirEnum.VERTICAL:
            case ScrollDirEnum.GRID:
                if (this.isScrollUp && this.getPositionInView(element).y > scrollHeight * (1 - this.node.anchorY) + ele.node.height / 2) {
                    // 超出上边界显示区域
                    let idx = ele.index + this.instantiateCount
                    if (idx < this.itemDataList.length && this.isScrollUp) {
                        this.setItemData(element, this.itemDataList[idx], idx)
                        ele.index = idx
                        this.setPosY(idx, element)
                    }
                } else if (!this.isScrollUp && this.curScrollPos > -ele.node.height / 2 && this.getPositionInView(element).y < -(scrollHeight * this.node.anchorY + ele.node.height / 2)) {
                    // 超出下边界显示区域
                    let idx = ele.index - this.instantiateCount
                    if (idx >= 0 && this.isScrollUp == false) {
                        this.setItemData(element, this.itemDataList[idx], idx)
                        ele.index = idx
                        this.setPosY(idx, element)
                    }
                }
                break
        }
    }


    private setPosX(index: number, node?: cc.Node): number {
        let x = 0
        if (this.adapterItem) {
            if (this.adapterList[index] && this.adapterList[index].x != null) {
                if (node) {
                    node.x = this.adapterList[index].x
                }
                return this.adapterList[index].x
            } else {
                let lastX = index == 0 ? 0 : this.adapterList[index - 1].x
                let lastWidth = index == 0 ? 0 : this.adapterList[index - 1].width
                // 上一个坐标 + 当前node偏移量
                switch (this.scrollDir) {
                    case ScrollDirEnum.VERTICAL:
                        x = this.scrollView.content.width / 2 + this.padingX//this.realItemWidth / 2 + this.padingX
                        break
                    case ScrollDirEnum.HORIZONTAL:
                        x += node.width / 2 + this.padingX + lastX + lastWidth / 2 + this.spacingX
                        this.adapterContentLength = Math.max(x + node.width / 2)
                        this.setScrollContentSize()
                        break
                    case ScrollDirEnum.GRID:
                        x = index % this.hangCount * this.itemDistanceX + this.realItemWidth / 2 + this.padingX
                        break
                }
                if (this.adapterList[index] == null) { this.adapterList[index] = { x: null, y: null, width: null, height: null } }
                this.adapterList[index].x = x
                this.adapterList[index].width = node.width
                if (node) { node.x = x }
                return x
            }
        } else {
            switch (this.scrollDir) {
                case ScrollDirEnum.VERTICAL:
                    x = this.scrollView.content.width / 2 + this.padingX//this.realItemWidth / 2 + this.padingX
                    break
                case ScrollDirEnum.HORIZONTAL:
                    x = index * this.itemDistanceX + this.realItemWidth / 2 + this.padingX
                    if (this.tagIndex >= -1 && index > this.tagIndex) {
                        x += this.tagLang
                    }
                    break
                case ScrollDirEnum.GRID:
                    x = index % this.hangCount * this.itemDistanceX + this.realItemWidth / 2 + this.padingX
                    break
            }
            if (node) {
                node.x = x
            }
            return x
        }
    }
    private setPosY(index: number, node?: cc.Node): number {
        let y = 0
        if (this.adapterItem) {
            if (this.adapterList[index] && this.adapterList[index].y != null) {
                if (node) {
                    node.y = this.adapterList[index].y
                }
                return this.adapterList[index].y
            } else {
                let lastY = index == 0 ? 0 : this.adapterList[index - 1].y
                let lastHeight = index == 0 ? 0 : this.adapterList[index - 1].height
                switch (this.scrollDir) {
                    case ScrollDirEnum.VERTICAL:
                        y = lastY - this.padingY - node.height / 2 - lastHeight / 2 - this.spacingY
                        this.adapterContentLength = Math.max(Math.abs(y) + node.height / 2)
                        this.setScrollContentSize()
                        // y = -index * this.itemDistanceY - this.realItemHeight / 2 - this.padingY
                        // if (this.tagIndex >= -1 && index > this.tagIndex) {
                        //     y -= this.tagLang
                        // }
                        break
                    case ScrollDirEnum.HORIZONTAL:
                        y = -this.scrollView.content.height / 2 + this.padingY//-this.realItemHeight / 2 - this.padingY
                        break
                    case ScrollDirEnum.GRID:
                        y = -Math.floor((index) / this.hangCount) * this.itemDistanceY - this.realItemHeight / 2 - this.padingY
                        if (this.tagIndex >= -1 && (Math.floor(index / this.hangCount)) > this.tagIndex) {
                            y -= this.tagLang
                        }
                        break
                }
                if (this.adapterList[index] == null) { this.adapterList[index] = { x: null, y: null, width: null, height: null } }
                this.adapterList[index].y = y
                this.adapterList[index].height = node.height
                if (node) { node.y = y }
                return y
            }
        } else {
            switch (this.scrollDir) {
                case ScrollDirEnum.VERTICAL:
                    y = -index * this.itemDistanceY - this.realItemHeight / 2 - this.padingY
                    if (this.tagIndex >= -1 && index > this.tagIndex) {
                        y -= this.tagLang
                    }
                    break
                case ScrollDirEnum.HORIZONTAL:
                    y = -this.scrollView.content.height / 2 + this.padingY//-this.realItemHeight / 2 - this.padingY
                    break
                case ScrollDirEnum.GRID:
                    y = -Math.floor((index) / this.hangCount) * this.itemDistanceY - this.realItemHeight / 2 - this.padingY
                    if (this.tagIndex >= -1 && (Math.floor(index / this.hangCount)) > this.tagIndex) {
                        y -= this.tagLang
                    }
                    break
            }
            if (node) {
                node.y = y
            }
            return y
        }
    }

    private setItemData(itemNode: cc.Node, data: any, index: number) {
        try {
            itemNode.getComponent(this.itemScript).setData(data, index, this.extraParams)
        } catch (error) {
            console.error("脚本中缺少setData方法，或者方法报错", error)
        }
    }

    // refreshItems调用，在刷新时可能需要重置item的index标签
    private resetIndex(index: number): number {
        if (this.itemDataList[index] != null) {
            return index
        }
        return this.resetIndex(index - this.instantiateCount)
    }

    // 刷新单独的item
    refreshItem(index: number, data) {
        if (this.itemDataList[index] == null) {
            return
        }
        this.itemDataList[index] = data
        if (this.getItem(index) == null) {
            return
        }
        this.setItemData(this.getItem(index), this.itemDataList[index], index)
    }
    // refreshItem(index: number) {
    //     this.setItemData(this.getItem(index), this.itemDataList[index], index)
    // }
    refreshItems(itemDataList: any[], ...args: any[]) {
        this.itemDataList = itemDataList
        if (args.length > 0) {
            this.extraParams = args
        }
        if (this.outInner == ScrollOutInner.OUT) {
            this.extraParams.push(this.scrollView)
        }
        this.fixItemNodes()
        // 最终构造完整的 itemList 列表,刷新数据
        this.itemList.forEach(element => {
            try {
                let newIndex = this.resetIndex(element.index)
                element.index = newIndex
                this.setItemData(element.node, this.itemDataList[element.index], element.index)
                this.setPosX(element.index, element.node)
                this.setPosY(element.index, element.node)
                // element.node.getComponent(this.itemScript).setData(this.itemDataList[element.index], element.index, this.extraParams)
            } catch (error) {
                console.warn("脚本中缺少refreshItem方法，或者方法报错", error)
            }
        })
    }

    // 数据新增或减少时,增加或减少item
    fixItemNodes() {
        // 判断是否需要删除 itemList 里的数据
        if (this.itemDataList.length < this.instantiateCount && this.itemList.length > this.itemDataList.length) {
            let needDeleteCount = this.itemList.length - this.itemDataList.length
            for (let index = this.itemDataList.length; index < this.itemDataList.length + needDeleteCount; index++) {
                this.itemList[index].node.destroy()
            }
            this.itemList.splice(this.itemDataList.length, needDeleteCount)
            // 判断是否需要增加 itemList 里的数据
        } else if (this.itemList.length < this.instantiateCount && this.itemList.length < this.itemDataList.length) {
            let addCount = Math.min(this.instantiateCount - this.itemList.length, this.itemDataList.length - this.itemList.length)
            let startIndex = 0
            this.itemList.forEach(element => {
                startIndex = Math.max(element.index + 1, startIndex)
            });
            for (let addIndex = startIndex; addIndex < (startIndex + addCount); addIndex++) {
                this.addItemNode(addIndex, this.itemDataList[addIndex], true)
            }
        }
        if (this.content) {
            this.setScrollContentSize()
        }
    }

    private get realItemWidth(): number {
        return this.itemWidth * this.itemScale
    }

    private get realItemHeight(): number {
        return this.itemHeight * this.itemScale
    }

    private initItemNode(): cc.Node {
        if (this.useNodePool) {
            // @TODO PoolManager
            return cc.instantiate(this.itemPrefab)
            // if (this.poolType == PoolEnum.ITEM_BAG) {
            //     return PoolManager.getItemBag(this.itemPrefab)
            // } else if (this.poolType == PoolEnum.ITEM_BASE) {
            //     return PoolManager.getItemBase(this.itemPrefab)
            // }
        } else {
            return cc.instantiate(this.itemPrefab)
        }
    }
    // back 
    private onScrollBegan() {
        this.scrollIndex = 0
    }
    private showUI() {
        if (this.itemPrefab == null) {
            console.error("item预制体加载失败")
            return
        }
        if (this.scrollView == null) {
            console.error("没有绑定scroll")
            return
        }

        this.setCreateItems(true)
        this.scrollIndex = -1
        this.scrollView.content.setAnchorPoint(0, 1)
        this.scrollView.content.setPosition(-this.scrollView.node.width / 2, this.scrollView.node.height / 2)

        this.setScrollContentSize()
        switch (this.scrollDir) {
            case ScrollDirEnum.VERTICAL:
                this.scrollView.scrollToTop()
                break
            case ScrollDirEnum.HORIZONTAL:
                this.scrollView.scrollToLeft()
                break
            case ScrollDirEnum.GRID:
                this.scrollView.scrollToTop()
                break
        }
    }

    private setCreateItems(bool: boolean) {
        if (bool) {
            this.scrollView.enabled = false
            this.canCreateItem = true
            this.createIndex = 0
            this.baseIndex = 0
            this.life = 0
        } else {
            this.scrollView.enabled = true
            this.canCreateItem = false
            this.createIndex = 0
            this.baseIndex = 0
            this.life = 0
        }
    }

    update(dt: number) {
        if (this.scrollIndex >= 0) { this.scrollIndex += dt }
        if (!this.canCreateItem) {
            return
        }
        for (let index = 0; index < this.cnumber; index++) {
            this.updateForCreateItem(dt)
        }
    }
    private updateForCreateItem(dt: number) {
        if (!this.canCreateItem) {
            return
        }
        if (this.life == 0) {
            // 生
            let _itemData = this.itemDataList[this.baseIndex]
            if (this.createIndex >= this.instantiateCount || _itemData == null) {
                this.setCreateItems(false)
                return
            }
            this.addItemNode(this.baseIndex, _itemData)
            this.createIndex += 1
            this.baseIndex += 1
        }
        this.life += dt
        if (this.life >= this.ctime) {
            this.life = 0
        }
    }
    setScrollContentSize() {
        if (this.adapterItem) {
            switch (this.scrollDir) {
                case ScrollDirEnum.VERTICAL:
                    this.scrollView.content.setContentSize(this.scrollView.node.width, this.adapterContentLength)
                    break
                case ScrollDirEnum.HORIZONTAL:
                    this.scrollView.content.setContentSize(this.adapterContentLength, this.scrollView.node.height)
                    break
                case ScrollDirEnum.GRID:
                    this.scrollView.content.setContentSize(this.scrollView.node.width, this.itemDistanceY * Math.ceil(this.itemDataList.length / this.hangCount) + this.padingY + this.tagLang + this.padingY2)
                    break
            }
        } else {
            switch (this.scrollDir) {
                case ScrollDirEnum.VERTICAL:
                    this.scrollView.content.setContentSize(this.scrollView.node.width, this.itemDistanceY * this.itemDataList.length + this.padingY + this.tagLang + this.padingY2 - this.spacingY)
                    break
                case ScrollDirEnum.HORIZONTAL:
                    this.scrollView.content.setContentSize(this.itemDistanceX * this.itemDataList.length + this.padingX + this.tagLang - this.spacingX, this.scrollView.node.height)
                    break
                case ScrollDirEnum.GRID:
                    this.scrollView.content.setContentSize(this.scrollView.node.width, this.itemDistanceY * Math.ceil(this.itemDataList.length / this.hangCount) + this.padingY + this.tagLang + this.padingY2 - this.spacingY)
                    break
            }
        }
        this.scrollMaxOffsetX = -this.scrollView.getMaxScrollOffset().x
        this.scrollMaxOffsetY = this.scrollView.getMaxScrollOffset().y

        // console.log("---重新设置了滚动区域", this.scrollView.content.height)
    }
    /**
     * 弹出详情标签，将会重设后续item的坐标。
     * @param index item标签
     * @param lang 坐标偏移量
     */
    setTag(index: number, lang: number) {
        this.tagLang = lang
        switch (this.scrollDir) {
            case ScrollDirEnum.VERTICAL:
            case ScrollDirEnum.HORIZONTAL:
                this.tagIndex = index
                break
            case ScrollDirEnum.GRID:
                this.tagIndex = Math.floor(index / this.hangCount)
                break
        }
        this.setScrollContentSize()
        this.itemList.forEach((element) => {
            this.setPosX(element.index, element.node)
            this.setPosY(element.index, element.node)
        });
    }
    /**清除详情标签，恢复item默认坐标 */
    clearTag() {
        this.setTag(-999, 0)
        // 修正index和坐标
        let scrollHeight = this.scrollView.node.height
        this.itemList.forEach(ele => {
            // 判断是否超出边界
            if (this.getPositionInView(ele.node).y > scrollHeight * (1 - this.node.anchorY) + this.itemDistanceY / 2) {
                if (ele.index + this.instantiateCount < this.itemDataList.length) {
                    ele.index += this.instantiateCount
                }
                this.setPosY(ele.index, ele.node)
                this.setItemData(ele.node, this.itemDataList[ele.index], ele.index)
            } else if (this.getPositionInView(ele.node).y < -(scrollHeight * this.node.anchorY + this.itemDistanceY / 2)) {
                if (ele.index - this.instantiateCount >= 0) {
                    ele.index -= this.instantiateCount
                }
                this.setPosY(ele.index, ele.node)
                this.setItemData(ele.node, this.itemDataList[ele.index], ele.index)
            }
        })
        this.setScrollContentSize()
    }
    /**删除某个元素 */
    del(index: number) {
        if (this.itemDataList.length < index) { return }
        this.itemDataList.splice(index, 1)
        // // 判断下是否需要删除节点
        if (this.itemList.length > this.itemDataList.length) {
            this.itemList.pop().node.destroy()
        }
        this.setScrollContentSize()
        for (let index = 0; index < this.itemList.length; index++) {
            let element = this.itemList[index]
            if (this.itemDataList[element.index] == null) {
                element.index -= this.instantiateCount
                break
            }
        }
        this.itemList.forEach((element) => {
            this.setPosX(element.index, element.node)
            this.setPosY(element.index, element.node)
            this.setItemData(element.node, this.itemDataList[element.index], element.index)
        });
    }
    /**在末尾添加一个元素 */
    add(data: any) {
        this.itemDataList.push(data)
        // 判断是否需要增加item
        if (this.itemList.length >= this.instantiateCount) {
            // 不需要
            // 判断下是否需要把最前面的放到最后面:1
            let needUpdate = false
            for (let index = 0; index < this.itemList.length; index++) {
                if (this.itemList[index].index == this.itemDataList.length - 2) {
                    needUpdate = true
                    break
                }
            }
            if (needUpdate) {
                let minIndex = 1000 //这个是最小值
                let minUpdateIndex = 0// 这个是最小值的标签
                for (let i = 0; i < this.itemList.length; i++) {
                    if (this.itemList[i].index < minIndex) {
                        minIndex = this.itemList[i].index
                        minUpdateIndex = i
                    }
                }
                // 判断下是否需要把最前面的放到最后面:2
                let _nodePos = 0
                let _offset = 0
                let needUpdate2 = false
                switch (this.scrollDir) {
                    case ScrollDirEnum.HORIZONTAL:
                        _nodePos = this.itemList[minUpdateIndex].node.x
                        _offset = this.scrollView.getScrollOffset().x
                        needUpdate2 = _nodePos + _offset > this.itemWidth / 2
                        break
                    case ScrollDirEnum.VERTICAL:
                    case ScrollDirEnum.GRID:
                        _nodePos = this.itemList[minUpdateIndex].node.y
                        _offset = this.scrollView.getScrollOffset().y
                        needUpdate2 = _nodePos + _offset > this.itemHeight / 2
                        break
                }
                if (needUpdate2) {
                    this.itemList[minUpdateIndex].index += this.instantiateCount
                    this.setItemData(this.itemList[minUpdateIndex].node, data, this.itemList[minUpdateIndex].index)
                    this.setPosX(this.itemList[minUpdateIndex].index, this.itemList[minUpdateIndex].node)
                    this.setPosY(this.itemList[minUpdateIndex].index, this.itemList[minUpdateIndex].node)
                }
            }
        } else {
            // 需要
            let index = this.itemDataList.length - 1
            this.addItemNode(index, data)
        }
        this.setScrollContentSize()
    }

    addItemNode(index: number, data: any, isRefresh: boolean = false) {
        let _node = this.initItemNode()
        // add放在前面.先激活onLoad方法,再走setData
        this.scrollView.content.addChild(_node)
        this.setItemData(_node, data, index)
        this.itemList.push({ index: index, node: _node })
        this.setPosX(index, _node)
        this.setPosY(index, _node)

        if (isRefresh || this.showAnim == 0) {
            _node.scale = this.itemScale
        } else if (this.showAnim == 1) {
            _node.scale = 0
            cc.tween(_node).
                to(this.animSpeed, { scale: this.itemScale + 0.1 }).
                to(this.animSpeed, { scale: this.itemScale }).
                start()
        } else if (this.showAnim == 2) {
            _node.scale = this.itemScale
            let delayTime = index % this.hangCount / 20 + 0.1
            _node.x -= _node.width / 2
            _node.scaleX = 0
            cc.tween(_node).delay(delayTime).to(this.animSpeed, { x: _node.x + _node.width / 2, scaleX: this.itemScale }).start()
        } else if (this.showAnim == 3) {
            //@TODO
            _node.scale = this.itemScale
            let delayTime = index % this.hangCount / 20 + 0.1
            _node.y += _node.height / 2
            _node.scaleY = 0
            cc.tween(_node).delay(delayTime).to(this.animSpeed, { y: _node.y - _node.height / 2, scaleY: this.itemScale }).start()
        } else if (this.showAnim == 4) {
            _node.scale = 0
            cc.tween(_node).
                to(this.animSpeed, { scale: this.itemScale }).
                start()
        } else {
            _node.scale = this.itemScale
        }
    }

    /**
     * @param val 立刻滚动到目标标签,目标标签将在顶部|左侧出现
     * @param type  滚到哪里的类型(1.居中 2.顶部|左侧 3.底部｜右侧)
     */
    scrollToIndexNow(val: number, type: number = 1, ...args: any[]) {
        if (this.adapterItem && this.adapterList[val] == null) {
            console.warn("未展示过,无法移动")
            return
        }
        if (val >= this.itemDataList.length) {
            val = this.itemDataList.length - 1
        }
        if (val < 0) {
            this.refreshItems(this.itemDataList)
            return
        }
        this.scrollView.stopAutoScroll()
        this.baseIndex = val

        let scrollPosIndex = this.baseIndex
        if (this.itemDataList.length - this.baseIndex < this.instantiateCount) {
            this.baseIndex -= this.instantiateCount - (this.itemDataList.length - this.baseIndex)
        } else {
            if (type == 1) {
                this.baseIndex -= Math.ceil(this.instantiateCount / 2)
            } else if (type == 3) {
                this.baseIndex -= (this.lieCount - 1) * this.hangCount
            }
        }
        if (this.scrollDir == ScrollDirEnum.GRID) {
            this.baseIndex -= this.baseIndex % this.hangCount
        }
        this.baseIndex = Math.max(this.baseIndex, 0)

        let _itemWidth = this.adapterItem ? this.adapterList[val].width : this.itemWidth
        let _itemHeight = this.adapterItem ? this.adapterList[val].height : this.itemHeight
        // 从第几个标签开始显示
        switch (this.scrollDir) {
            case ScrollDirEnum.HORIZONTAL:
                let _x = -(this.setPosX(scrollPosIndex) - (_itemWidth * this.itemScale + this.spacingX) / 2)
                // 判断是否超过边界
                if (_x < this.scrollMaxOffsetX) {
                    scrollPosIndex = this.itemDataList.length - this.instantiateCount
                    this.scrollView.content.x = this.scrollMaxOffsetX
                } else {
                    if (type == 1) {
                        this.scrollView.content.x = Math.min(-(this.setPosX(scrollPosIndex) - this.scrollView.node.width / 2), 0)
                        if (-(this.setPosX(scrollPosIndex) - this.scrollView.node.width / 2) >= 0) {
                            this.baseIndex = 0
                        }
                    } else if (type == 2) {
                        this.scrollView.content.x = -(this.setPosX(scrollPosIndex) - (_itemWidth * this.itemScale + this.spacingX) / 2)
                    } else {
                        scrollPosIndex++
                        this.scrollView.content.x = Math.min(-(this.setPosX(scrollPosIndex) - this.scrollView.node.width - _itemWidth / 2 - this.spacingY), 0)
                        if (-(this.setPosX(scrollPosIndex) - this.scrollView.node.width - _itemWidth / 2 - this.spacingY) >= 0) {
                            this.baseIndex = 0
                        }
                    }
                }
                break
            case ScrollDirEnum.VERTICAL:
            case ScrollDirEnum.GRID:
                let _y = (Math.abs(this.setPosY(scrollPosIndex)) - (_itemHeight * this.itemScale + this.spacingY) / 2)
                if (_y > this.scrollMaxOffsetY) {
                    scrollPosIndex = this.itemDataList.length - this.instantiateCount
                    this.scrollView.content.y = this.scrollMaxOffsetY
                } else {
                    if (type == 1) {
                        this.scrollView.content.y = Math.max(Math.abs(this.setPosY(scrollPosIndex)) - this.scrollView.node.height / 2, 0)
                        if (Math.abs(this.setPosY(scrollPosIndex)) - this.scrollView.node.height / 2 <= 0) {
                            this.baseIndex = 0
                        }
                    } else if (type == 2) {
                        this.scrollView.content.y = Math.abs(this.setPosY(scrollPosIndex)) - (_itemHeight * this.itemScale + this.spacingY) / 2
                    } else {
                        scrollPosIndex = this.scrollDir == ScrollDirEnum.VERTICAL ? (scrollPosIndex + 1) : scrollPosIndex + this.hangCount
                        this.scrollView.content.y = Math.max(Math.abs(this.setPosY(scrollPosIndex)) - this.scrollView.node.height - _itemHeight / 2 - this.spacingY, 0)
                        if (Math.abs(this.setPosY(scrollPosIndex)) - this.scrollView.node.height - _itemHeight / 2 - this.spacingY <= 0) {
                            this.baseIndex = 0
                        }
                    }
                }
                break
        }
        if (args.length > 0) {
            this.extraParams = args
        }
        this.fixItemNodes()
        // 如果content有子项目,则重制目标点位置
        if (this.itemList.length > 0) {
            for (let index = 0; index < this.itemList.length; index++) {
                // let i = this.baseIndex + index
                let elemnet = this.itemList[index]
                elemnet.index = this.baseIndex + index
                this.setPosX(elemnet.index, elemnet.node)
                this.setPosY(elemnet.index, elemnet.node)
                if (gameMethod.isEmpty(this.itemDataList[elemnet.index])) {
                    continue
                }
                this.setItemData(elemnet.node, this.itemDataList[elemnet.index], elemnet.index)
            }
        }
    }

    /**
     * 尝试滚动到滚动视图中心
     * @param index 标签
     * @param type  滚到哪里的类型(1.居中 2.顶部|左侧 3.底部｜右侧)
     * @param time 
     */
    scrollToIndex(index: number, type: number = 1, time: number = 1, offsetY: number = 0) {
        if (this.itemDataList[index] == null) {
            console.error("不存在此标签")
            return
        }
        switch (this.scrollDir) {
            case ScrollDirEnum.HORIZONTAL:
                if (type == 1) {
                    this.scrollView.scrollToOffset(cc.v2(this.setPosX(index) - this.scrollView.node.width / 2, this.scrollView.getScrollOffset().y), time)
                } else if (type == 2) {
                    this.scrollView.scrollToOffset(cc.v2(this.setPosX(index) - this.itemDistanceX / 2, this.scrollView.getScrollOffset().y), time)
                } else {
                    index++
                    this.scrollView.scrollToOffset(cc.v2(this.setPosX(index) - this.scrollView.node.width, this.scrollView.getScrollOffset().y - this.itemWidth / 2 - this.spacingX), time)
                }
                break
            case ScrollDirEnum.VERTICAL:
            case ScrollDirEnum.GRID:
                if (type == 1) {
                    this.scrollView.scrollToOffset(cc.v2(this.scrollView.getScrollOffset().x, Math.abs(this.setPosY(index)) - this.scrollView.node.height / 2 - offsetY), time)
                } else if (type == 2) {
                    this.scrollView.scrollToOffset(cc.v2(this.scrollView.getScrollOffset().x, Math.abs(this.setPosY(index)) - this.itemDistanceY / 2 - offsetY), time)
                } else {
                    index = this.scrollDir == ScrollDirEnum.VERTICAL ? (index + 1) : index + this.hangCount
                    this.scrollView.scrollToOffset(cc.v2(this.scrollView.getScrollOffset().x, Math.abs(this.setPosY(index)) - this.scrollView.node.height - this.itemHeight / 2 - this.spacingY - offsetY), time)
                }
                break
        }
        // this.scheduleOnce(() => {
        //     this.refreshItem(index)
        // }, time)
    }

    getItem(index: number): cc.Node | null {
        for (const key in this.itemList) {
            if (this.itemList[key].index == index) {
                return this.itemList[key].node
            }
        }
        return
    }
    checkScrollState() {
        if (this.scrollIndex > this.itemDataList.length) {
            this.scrollView.stopAutoScroll()
            this.scrollView.scrollToOffset(cc.v2(0, this.scrollMaxOffsetY / 2))
        }
    }

    // 使用对象池时，在切换界面时必须使用这个方法，将所有对象放到池中
    clear() {
        // @TODO PoolManager
        if (this.scrollView && this.scrollView.content) {
            this.scrollView.content.removeAllChildren()
        }
        // if (this.useNodePool) {
        //     this.itemList.forEach(element => {
        //         if (this.poolType == PoolEnum.ITEM_BAG) {
        //             PoolManager.putItemBag(element.node)
        //         } else if (this.poolType == PoolEnum.ITEM_BASE) {
        //             PoolManager.putItemBase(element.node)
        //         }
        //     });
        // } else {
        //     if (this.scrollView && this.scrollView.content) {
        //         this.scrollView.content.removeAllChildren()
        //     }
        // }
        this.itemDataList = []
        this.itemList = []
    }
}