先看看這個(gè)組件的滾動(dòng)效果：

組件效果

tip:最后那個(gè)button按鈕是為了看當(dāng)前有多少個(gè)示例TableCellNode咆蒿。
當(dāng)前一共是顯示100個(gè)cell的TableView尉尾，最后打印的話是實(shí)際復(fù)用了8個(gè)cell。

TableView組件源碼：

const { ccclass, property } = cc._decorator;

export interface IDataSource {
    tableCellSizeForIndex(table: TableView, idx: number): cc.Size;

    tableCellAtIndex(table: TableView, idx: number): TableCellNode;

    numberOfCellsInTableView(table: TableView): number;
}

export interface IDelegate {
    tableCellTouched(table: TableView, cell: TableCellNode, touch: cc.Touch)
}

export class TableCellNode extends cc.Node {
    idx: number;//復(fù)用的時(shí)候會(huì)更改IDX
    realIdx: number;//用于標(biāo)記第一次創(chuàng)建的時(shí)候的IDX

    constructor() {
        super();

        this.idx = -1;
        this.realIdx = -1;
    }
}

/**
 * 目前只考慮支持垂直方向的TableView
 */
@ccclass
export default class TableView extends cc.Component {
    scrollView: cc.ScrollView = null;
    dataSource: IDataSource = null;
    delegate: IDelegate = null;

    mCurYList: number[] = [];
    mCurCell: TableCellNode[] = [];
    mIdleCell: TableCellNode[] = [];

    mLastShowBeginI: number = 0;
    mLastShowEndI: number = 0;
    mLastTouch: cc.Touch = null;

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        //由于我們的srcroolView是在onLoad的時(shí)候執(zhí)行的萌庆，所以我們?cè)賝nLoad之前都不能這樣做
        this.scrollView = this.getComponent(cc.ScrollView);
        if (!this.scrollView)
            throw Error("need ScrollView Component");

        //用于記錄點(diǎn)擊的位置溶褪。 onScrollEvent的回調(diào)中并沒(méi)有位置參數(shù)
        let event = new cc.Component.EventHandler();
        event.target = this.node;
        event.component = "TableView";
        event.handler = "onScrollEvent";
        this.scrollView.scrollEvents.push(event);
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
    }

    start() {
        console.log("TableView start");
        this.reload();
    }

    // update (dt) {}

    setDataSource(dataSource: IDataSource) {
        this.dataSource = dataSource;
        console.log("TableView setDataSource");
        this.reload();
    }

    setDelegate(delegate: IDelegate) {
        this.delegate = delegate;
    }

    dequeueCell(): TableCellNode {
        if (this.mIdleCell.length > 0)
            return this.mIdleCell.pop();
        return null;
    }

    reloadNoMove() {
        let oldY = this.scrollView.content.y;//記錄之前的位置。
        console.log("oldy=" + oldY);
        this.reload();
        this.scrollView.content.y = oldY;
        this.onChangeContentPos();
    }

    reload() {
        if (!cc.isValid(this.scrollView))
            return;

        if (this.dataSource) {
            //測(cè)量tableCell的高度,計(jì)算需要顯示幾個(gè)cell

            //渲染之前把之前使用的cell推入空閑cell中
            while (this.mCurCell.length > 0) {
                let idle = this.mCurCell.pop();
                // idle.removeFromParent();
                idle.active = false;
                // console.log("recycle 0 cell idx=" + idle.idx);
                this.mIdleCell.push(idle);//把最下面的cell推入空閑中
            }
            this.scrollView.content.y = this.scrollView.node.height / 2;//回退到最上面

            let len = this.dataSource.numberOfCellsInTableView(this);
            let viewPortH = this.node.height;
            this.mCurYList = [];
            let curH = 0;
            this.mLastShowBeginI = 0;
            this.mLastShowEndI = 0;
            // console.log("len=" + len);

            let i = 0;
            for (; i < len; i++) {
                let curCellH = this.dataSource.tableCellSizeForIndex(this, i).height;
                // console.log("curCellH=" + curCellH + ",viewPortH=" + viewPortH);
                if (curH < viewPortH)
                    this.mLastShowEndI = i;
                this.mCurYList.push(-curH);
                curH += curCellH;
            }
            // console.log("this.mLastShowBeginI=" + this.mLastShowBeginI + ",this.mLastShowEndI=" + this.mLastShowEndI);

            this.scrollView.content.height = curH;

            for (let i = this.mLastShowBeginI; i <= this.mLastShowEndI; i++) {
                let cell = this.dataSource.tableCellAtIndex(this, i);
                cell.idx = i;
                if (!cell.parent) {
                    this.scrollView.content.addChild(cell);
                }
                if (cell.realIdx == -1)
                    cell.realIdx = cell.idx;

                this.mCurCell.push(cell);
                cell.active = true;
                cell.y = this.mCurYList[i];
            }

            //排序是為了方便做回收處理践险，從上往下排列
            this.mCurCell.sort(function (a, b): number {
                return b.y - a.y;//從大到小排列
            });
        }
    }

    onTouchStart(event: cc.Event.EventTouch) {
        console.log("onTouchStart event x=" + event.touch.getLocationX() + ",y=" + event.touch.getLocationY());
        // let point = this.node.convertToNodeSpaceAR(cc.v2(event.touch.getLocationX(), event.touch.getLocationY()));
        // console.log("onTouchStart point x=" + point.x + ",y=" + point.y);
        // this.mLastClickY = point.y - this.scrollView.content.y;
        // console.log("onTouchStart y(origin,offset)=" + (point.y - this.node.height / 2) + "," + this.mLastClickY + ",this.scrollView.content.y=" + this.scrollView.content.y);
        this.mLastTouch = event.touch;
    }

    mScrolling: boolean = false;

    /**
     * 上邊緣繼續(xù)往下拖拽: SCROLL_BEGAN->SCROLLING->SCROLL_TO_TOP->SCROLLING->TOUCH_UP【放手】
     *                   ->BOUNCE_TOP->SCROLLING->AUTOSCROLL_ENDED_WITH_THRESHOLD->SCROLLING->SCROLL_ENDED
     *
     * 中間拖拽：SCROLL_BEGAN->SCROLLING->TOUCH_UP【放手】->SCROLL_ENDED
     * 下邊緣繼續(xù)往上拖拽: SCROLL_BEGAN->SCROLLING->SCROLL_TO_BOTTOM->SCROLLING->TOUCH_UP【放手】
     *                   ->BOUNCE_BOTTOM->SCROLLING->AUTOSCROLL_ENDED_WITH_THRESHOLD->SCROLLING->SCROLL_ENDED
     *
     * 點(diǎn)擊: TOUCH_UP
     * @param scrollView
     * @param eventType
     * @param customEventData
     */
    onScrollEvent(scrollView: cc.ScrollView, eventType: cc.ScrollView.EventType, customEventData: string) {
        // console.log("scrolling=" + cc.ScrollView.EventType.SCROLLING);
        // console.log("onScrollEvent scrollview=" + scrollView + ",eventType=" + eventType + ",customEventData=" + customEventData + ",this.mScrolling=" + this.mScrolling);
        if (eventType == cc.ScrollView.EventType.SCROLL_BEGAN) {
            this.mScrolling = true;
        } else if (eventType == cc.ScrollView.EventType.SCROLL_ENDED) {
            this.mScrolling = false;
        } else if (eventType == cc.ScrollView.EventType.SCROLLING) {
            if (!this.dataSource) {
                return;
            }
            this.onChangeContentPos();
        } else if (eventType == cc.ScrollView.EventType.TOUCH_UP) {
            // console.log("this.delegate = " + this.delegate);
            if (!this.mScrolling && this.delegate && this.mLastTouch) {
                for (let i = 0; i < this.mCurCell.length; i++) {
                    let child = this.mCurCell[i];
                    let rect = child.getBoundingBoxToWorld();
                    // console.log("[" + i + "] rect=" + rect + ",point=" + this.mLastTouch.getLocation() + ",result=" + rect.contains(this.mLastTouch.getLocation()));
                    if (rect.contains(this.mLastTouch.getLocation())) {
                        this.delegate.tableCellTouched(this, child, this.mLastTouch);
                        break;
                    }
                }
            }
        }
    }

    onChangeContentPos() {
        //滾動(dòng)的時(shí)候需要計(jì)算顯示哪幾個(gè)cell
        // console.log(scrollView.content.y);
        let viewY1 = this.scrollView.content.y - this.scrollView.node.height / 2;
        let viewY2 = viewY1 + this.node.height;
        let curY = 0;
        let showBeginI = -1;
        let showEndI = -1;
        for (let i = 0; i < this.mCurYList.length; i++) {
            let curCellH = this.dataSource.tableCellSizeForIndex(this, i).height;
            if (curY + curCellH < viewY1) {//視口上面
            } else if (curY > viewY2) {//視口下面
                break
            } else {//視口里面
                if (showBeginI == -1)
                    showBeginI = i;
                showEndI = i;
            }
            curY += curCellH;
        }
        if (showBeginI == -1 || showEndI == -1)
            return;
        if (showBeginI >= this.mLastShowBeginI && showEndI <= this.mLastShowEndI) {
            return;//顯示的cell區(qū)間不變
        }

        let showNewBeginI = showBeginI;
        let showNewEndI = showEndI;
        if (showBeginI < this.mLastShowBeginI) {//手指往下滑動(dòng)猿妈，組件往下滑動(dòng)，導(dǎo)致當(dāng)前顯示的頂端cell索引小于之前的
            if (showEndI < this.mLastShowEndI) {
                let curEnd = this.mLastShowEndI;
                while (curEnd > showEndI) {
                    if (this.mCurCell.length > 0) {
                        let idle = this.mCurCell.pop();
                        //之前采用remove的方法導(dǎo)致子cell中添加的TOUCH_START監(jiān)聽(tīng)后面都無(wú)效了巍虫，現(xiàn)在改成置為active為false
                        //來(lái)取代從父節(jié)點(diǎn)移除操作彭则。其實(shí)也沒(méi)必要移除因?yàn)楹罄m(xù)又要添加進(jìn)來(lái)，這樣算起來(lái)還是切換active更高效點(diǎn)
                        // idle.removeFromParent();
                        idle.active = false;
                        this.mIdleCell.push(idle);//把最下面的cell推入空閑中
                        // console.log("recycle 1 cell idx=" + idle.idx);
                    }
                    curEnd--;
                }
            }
            showNewEndI = this.mLastShowBeginI - 1;
        } else if (showEndI > this.mLastShowEndI) {//手指往上滑動(dòng)占遥，組件往上滑動(dòng),導(dǎo)致當(dāng)前顯示底段的cell索引大于之前的
            if (showBeginI > this.mLastShowBeginI) {
                let curBegin = this.mLastShowBeginI;
                while (curBegin < showBeginI) {
                    if (this.mCurCell.length > 0) {
                        let idle = this.mCurCell.shift();
                        // idle.removeFromParent();
                        idle.active = false;
                        this.mIdleCell.push(idle);//把最下面的cell推入空閑中
                        // console.log("recycle 2 cell idx=" + idle.idx);
                    }
                    curBegin++;
                }
            }
            showNewBeginI = this.mLastShowEndI + 1;
        }
        // console.log("showBeginI=" + this.mLastShowBeginI + "," + showBeginI + ",showEndI=" + this.mLastShowEndI + "," + showEndI + " | showNewBeginI=" + showNewBeginI + ",showNewEndI=" + showNewEndI);
        this.mLastShowBeginI = showBeginI;
        this.mLastShowEndI = showEndI;
        for (let i = showNewBeginI; i <= showNewEndI; i++) {
            let cell = this.dataSource.tableCellAtIndex(this, i);
            cell.idx = i;//更新IDX
            if (!cell.parent) {
                this.scrollView.content.addChild(cell);
            }
            if (cell.realIdx == -1) {
                // console.log("add new cell idx=" + cell.idx);
                cell.realIdx = cell.idx;
            }
            this.mCurCell.push(cell);
            cell.active = true;
            cell.y = this.mCurYList[i];
        }
        //排序是為了方便做回收處理俯抖，從上往下排列
        this.mCurCell.sort(function (a, b): number {
            return b.y - a.y;//從大到小排列
        });
    }
}

接口IDataSource 用來(lái)TableView的表現(xiàn)。
接口IDelegate 用來(lái)回調(diào)某個(gè)cell的點(diǎn)擊瓦胎。

Demo下載地址

@注意Demo中的TableView沒(méi)有及時(shí)更新芬萍，以本文中的TableView為準(zhǔn)

實(shí)際問(wèn)題1 文字疊影

文字疊影

如果設(shè)置沒(méi)有背景圖片，純Label的時(shí)候搔啊，我們的TableView后面會(huì)有文字疊影的情況柬祠，修復(fù)的方法目前就是cell再加一個(gè)背景底，這樣渲染出來(lái)的文字就正常了

文字疊影的Item

把我們的Item的背景圖片改成不透明：

不透明

添加背景圖片负芋，文字疊影問(wèn)題解決