Question

我在页面中有三个列表，当选择一个项目时，其他项目无法在其他列表中选择。当我导航到该页面时，我编写了专注于所选列表项的代码。现在，问题在于它没有聚焦，addEventDelegate不适用于列表。焦点代码正在执行，滚动条再次移动到顶部。

最初我试过这样：

tList.addEventDelegate({
    onAfterRendering: function() {
        debugger;
        var a = sap.ui.getCore().byId("typesList").getSelectedItems()[0];
        if(a != undefined) { 
            $("#"+a.sId)[0].focus();
        }
    }
}, this)
cList.addEventDelegate({
    onAfterRendering: function() {
        debugger;
        var a = sap.ui.getCore().byId("catList").getSelectedItems()[0];
        if(a != undefined) { 
            $("#"+a.sId)[0].focus();
        }
    }
}, cList)
sList.addEventDelegate({
    onAfterRendering: function() {
        debugger;
        var a = sap.ui.getCore().byId("statList").getSelectedItems()[0];
        if(a != undefined) { 
            $("#"+a.sId)[0].focus();
        }
    }
}, sList)

它没有用。 onAfterRendering永远不会被解雇。我试过这个：

onRouteMatched: function(oEvent) {
    debugger;
    var tList = sap.ui.getCore().byId("typesList");
    var cList = sap.ui.getCore().byId("catList");
    var sList = sap.ui.getCore().byId("statList");
    var typesItem = sap.ui.getCore().byId("typesList").getSelectedItems()[0];
    if(typesItem != undefined) { 
        $("#"+typesItem.sId)[0].focus();
    }
    var catItem = sap.ui.getCore().byId("catList").getSelectedItems()[0];
    if(catItem != undefined) { 
        var i = cList.indexOfItem(catItem);
        //$("#"+catItem.sId)[0].focus();
        cList.getItems()[i].focus(); 
    }
    var statItem = sap.ui.getCore().byId("statList").getSelectedItems()[0];
    if(statItem != undefined) { 
        $("#"+statItem.sId)[0].focus();
    }
}

它运行良好但我不知道为什么滚动条在执行此代码后移动到视图的顶部。

有什么建议吗？

Answer 1

使用.getDomRef().focus()

您必须小心尝试滚动到列表项。如果您的视图，列表或项目尚未在DOM中呈现，这将导致错误。所以写一些代码来防止这种情况。

在下面的示例中，我检查是否存在所选列表项的DOM引用。如果是，请致电.focus()滚动查看。如果DOM引用不存在，我会在列表呈现后向列表中添加一个事件委托，然后滚动到所选项目。

_scrollToListItem: function() {
    var oItemDomRef = this.getView().byId("list").getSelectedItem().getDomRef();
    if (!oItemDomRef) {
        this.getView().byId("list").addEventDelegate({
            onAfterRendering: function() {
                this._scrollToListItem();
            }.bind(this)
        });
    } else {
        oItemDomRef.focus();
    }
}

如何滚动到包含多个列表的页面中的列表项

1 个答案: