Egret 组件顺序排列时的 drawCall 优化思路

Posted 2020-11-27 webfs

竖屏项目中 垂直排序,或者 横向排序 的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子组件高度即可在滚动过程中 没有卡顿