Question

我创建了一个虚拟列表，当用户在列表顶部或底部滚动时，新数据将添加到虚拟列表的模型中。这似乎工作正常。我的问题是虚拟列表的项目高度不同，所以我需要它们能够在用户屏幕上显示之后或之前自行配置行高。为此，我在bind delegate

中添加以下代码

item.addListenerOnce("appear", function() {
            var height = item.getSizeHint().height;
            pane.getRowConfig().setItemSize(id, height);
          }, this);

这似乎可以解决列表中大多数项目的问题，但有些项目根本没有触发出现的事件。

以下是操场http://tinyurl.com/q94dhlz

中的代码

Answer 1

您可以使用与VirtualTree相同的技术来调整行宽。我们的想法是等到WidgetCell图层完成渲染。这将通过事件通知。然后向图层询问所有可见行并调整这些小部件的高度。但出于性能原因，这是异步的：

qx.Class.define('my.List', {
  extend: qx.ui.list.List,

  members:
  {
    syncWidget : function(jobs)
    {
      qx.log.Logger.debug("syncWidget");

      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;

      for (var row = firstRow; row < firstRow + rowSize; row++)
      {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget != null)
        {
          var height = widget.getSizeHint().height;
          qx.log.Logger.debug("height: " + height + " row:" + row + " widget: " + widget.getDay())
          this.getPane().getRowConfig().setItemSize(row, height);
        }
      }
    },

    _initLayer : function()
    {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
    },

    _onUpdated : function(event)
    {
      if (this.__deferredCall == null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
          qx.ui.core.queue.Widget.add(this);
        }, this);
      }
      this.__deferredCall.schedule();
    }
  }
});

以下是操场http://tinyurl.com/qcy8a7c

中的代码

qooxdoo中的无限滚动与虚拟列表

1 个答案: