如何检测分离栏何时移动?或者在调整窗格时

Question

这是带有响应式分离器的plunk的链接：https：//embed.plnkr.co/0yo35xoismf5eg6r？

如何检测窗格之间的分离栏何时移动并因此调整大小？window.resize()仅适用于窗口和放大/缩放。

Answer 1

您可以使用sap.ui.layout.splitter和resize event。

Answer 2

ResponsiveSplitter没有任何resize事件。您可以使用jQuery和DOM事件实现自己的处理程序。这是Plunker上的一个示例。

控制器：

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";
    return Controller.extend("demo.V", {
        _paneWidths: [],
        onInit: function() {
            this._resizeHandler = this.onSplitterResize.bind(this);
            document.addEventListener("touchend", this._resizeHandler);
            document.addEventListener("mouseup", this._resizeHandler);
        },
        onExit: function() {
            document.removeEventListener("touchend", this._resizeHandler);
            document.removeEventListener("mouseup", this._resizeHandler);
        },
        onSplitterResize: function() {
            var resized = false;
            var panes = this.getView().byId("paneContainer").getPanes();
            for (var index = 0; index < panes.length; index++) {
                var paneWidth = $(panes[index].getContent().getDomRef()).parent().css("width");
                if (paneWidth !== this._paneWidths[index]) {
                    this._paneWidths[index] = paneWidth;
                    resized = true;
                }
            }
            if (resized) {
                // here goes your resize logic
            }
        }
    });
});

Answer 3

• sap/ui/layout/Splitter随附事件resize：

  <layout:Splitter resize=".onPaneResize" />
  

• 自V1.92： sap/ui/layout/PaneContainer(通常在sap/ui/layout/ResponsiveSplitter中(也具有resize事件：

  <layout:ResponsiveSplitter>
    <layout:PaneContainer resize=".onPaneResize" /> <!-- Since 1.92 -->
  

ResponsiveSplitter的演示套件样品已相应更新。如果您移动栏，应用程序会相应地报告尺寸。