Question

以下是带有分隔符的pl子的链接：https://embed.plnkr.co/0yo35xOiSmF5eG6R?show=V.view.xml,preview。

如何检测何时移动了面板1和面板2之间的分隔器，从而改变了面板1和面板2的大小？ window.resize（）仅适用于窗口并放大/缩小。

Answer 1

您可以使用sap.ui.layout.Splitter和Resize Event。

Answer 2

ResponsiveSplitter没有任何resize事件。您可以使用jQuery和DOM事件来实现自己的处理程序。 Here is an example on 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 带有 event resize：

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

自 v1.92 起： sap/ui/layout/PaneContainer 经常在 sap/ui/layout/ResponsiveSplitter 中使用，还有 resize event：
```
<layout:ResponsiveSplitter>
  <layout:PaneContainer resize=".onPaneResize" /> 
```

演示套件 sample of ResponsiveSplitter 已相应更新。如果您移动栏，应用会相应报告大小。

如何检测分隔条何时移动？还是在调整面板尺寸时？

3 个答案: