Egret 組件順序排列時的 drawCall 優化思路

豎屏項目中 垂直排序,或者 橫向排序 的scoller 或者 list 組件可用

思路 :  滾動過程中, 超出 用戶可視區域的部分 組件進行掩藏, 滾動到可視區域前后一定范圍再進行顯示

滾動事件:

this.MainList.addEventListener(eui.UIEvent.CHANGE, (e) => {}, this);

獲取Scroller中某個子組件 相對於 用戶可視區域的 坐標

let point = self.MainListBox.localToGlobal(item.x, item.y)

控制顯示隱藏: 是用的是 <Component>.visible = <boolean>

let res;
if (point.y < 0 - item.height * 2 || point.y > self.stage.stageHeight + item.height * 2) {
    Log(item['floor'], '需要隱藏', point.x, point.y)
    res = false;
} else {
    Log(item['floor'], '需要顯示', point.x, point.y)
    res = true;
}
item['showhide'](res); //<Component>.visible = <boolean>

示例代碼:

let self = this
self.MainList.addEventListener(eui.UIEvent.CHANGE, (e) => {
    self.MainListBox.$children.forEach((item, i) => {
        let point = self.MainListBox.localToGlobal(item.x, item.y)
        let res;
        if (point.y < 0 - item.height * 2 || point.y > self.stage.stageHeight + item.height * 2) {
            Log(item['floor'], '需要隱藏', point.x, point.y)
            res = false;
        } else {
            Log(item['floor'], '需要顯示', point.x, point.y)
            res = true;
        }
        item['showhide'](res);
    })
}, this);

我的項目中 測試預留前后2子組件高度即可在滾動過程中 沒有卡頓