如何滚动到具有多个列表的页面中的列表项目

我在页面中有三个列表，其中当选择一个项目时，不能在其他列表中选择其他项目。当我导航到该页面时，我编写了关注选定列表项的代码。现在，问题在于它没有关注并且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(); 
    } 
}

它的工作很好，但我不知道为什么滚动条在执行该代码后移动到视图的顶部。

有什么建议吗？

来源

2016-05-08 Anjali

[讨论了元（http://meta.stackoverflow.com/q/322657/601179） – gdoron

我猜你正在使用'sap.m.List'。你不需要直接改变DOM（使用jQuery）。对于这种情况，ListBase获得了[setSelectedItems]（https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.ListBase.html#setSelectedItem）。另外ListItem应该有['type = Active']（https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.ListItemBase.html#getType），因为据我所知，'' “无效”项目不能被“选择”。 – masch

谢谢你的答复。我的项目正在被选中。问题在于滚动条。我想将选中的项目聚焦在三个列表中的一个列表中。滚动条移动到选定的列表项并再次向上移动 – Anjali

使用.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(); 
    } 
}

来源

2017-07-16 04:51:07 Kyle

如何滚动到具有多个列表的页面中的列表项目

回答

相关问题