sap.m.List 滚动到特定项目

Question

我在我的 SAPUI5 应用程序中使用 sap.m.List。有 90 个条目，过去 3 个月中每天一个。看起来像这样：

现在我想在单击 Button 时滚动到特定的 CustomListItem。我的观点是这样的：

我的想法是我有三个按钮可以直接滚动到一个月。例如：今天、上个月、第三个月。单击按钮会直接滚动到该月的第一个条目。我刚发现……像 oList.setSelectedItem(oItem, true); 没有效果。

有人知道如何做到这一点吗？

提前致谢。

Answer 1

我建议看一下 Plunker 中的这段代码片段。我分叉了另一个 plunker 并稍微修改了代码。在其中，您可以在滚动容器内找到一个列表，之后通过知道列表项的 id 属性用于获取所需的项目。

http://plnkr.co/edit/a5JwfkvAZcHq7NDoYG5s?p=preview

handleSelectChange: function(oEvent) {
      var sId = oEvent.getParameter("selectedItem").getBindingContext().getObject().id;
      var oList = this.getView().byId("ProductList");
      var aListItems = oList.getItems();
      var oListItem;
      aListItems.forEach(function(element){
        var sListObjectId = element.getBindingContext().getObject().id;
        if(sId === sListObjectId){
          oListItem = element;
        }
      })
      var oScrollContainer = this.getView().byId("oScrollContainer");
      jQuery.sap.delayedCall(0, null, function() {
        oScrollContainer.scrollToElement(oListItem);
        oList.setSelectedItem(oListItem);
      });
    }

希望对您有所帮助！

Answer 2

您可以检索周围容器的 ScrollDelegate（我认为在您的情况下是 FixFlex），然后使用它滚动到所选项目。简短示例：

oFixFlex.getScrollDelegate().scrollToElement(oItem.getDomRef());

另一种选择是将您的列表包装在 Scrollcontainer 中，如其他答案中所述。

Answer 3

我做了一些修改，可以达到你的要求。

查看

<!-- Buttons  --> 
<Button text="Previous Month" press="scrollToPreviousMonth" class="sapUiTinyMarginEnd"/> 
<Button text="Today" press="scrollToCurrentMonth" class="sapUiTinyMarginEnd"/> 
<Button text="Next Month" press="scrollToNextMonth"/>

<!-- List inside scroll Container -->   
<ScrollContainer id="oScrollContainer" height="405px" vertical="true">
    <List id="monthList"
        items="{ 
          path: 'dataModel>/items', 
          sorter: { path: 'group', group: true },
          groupHeaderFactory: '.getGroupHeaderMonth' }" 
          includeItemInSelection="true">
        <CustomListItem type="Active">
            <Toolbar>
                <Label text="{dataModel>title}"/>
                <ToolbarSpacer />
                <Label text="{dataModel>day}"/>
                <core:Icon width="50px" src="sap-icon://edit" />
            </Toolbar>
        </CustomListItem>
    </List> 
</ScrollContainer>

控制器

//Setting the data
setDataToView1: function(sType) {   
    var oData = [
       { "title": "Jan-01", "day": "01-01-2019", "status": "often", "group": "1" },
       { "title": "Jan-02", "day": "02-01-2019", "status": "often", "group": "1" },
       { "title": "Jan-03", "day": "03-01-2019", "status": "often", "group": "1" },
       { "title": "Jan-04", "day": "04-01-2019", "status": "often", "group": "1" },

       { "title": "Feb-01", "day": "01-02-2019", "status": "often", "group": "2" },
       { "title": "Feb-02", "day": "02-02-2019", "status": "often", "group": "2" },
       { "title": "Feb-03", "day": "03-02-2019", "status": "often", "group": "2" },
       { "title": "Feb-04", "day": "04-02-2019", "status": "often", "group": "2" },

       { "title": "Mar-01", "day": "01-03-2019", "status": "often", "group": "3" },
       { "title": "Mar-02", "day": "02-03-2019", "status": "often", "group": "3" },
       { "title": "Mar-03", "day": "03-03-2019", "status": "often", "group": "3" },
       { "title": "Mar-04", "day": "04-03-2019", "status": "often", "group": "3" }                 
    ];
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({ "items" : oData });
    this.getView().setModel(oModel, "dataModel");
},
//setting the group header
getGroupHeaderMonth: function (oGroup) {
    var oMonths = { "1" : "Jan", "2" : "Feb", "3" : "Mar", "4" : "Apr", "5" : "May", "6" : "Jun", "7" : "Jul", "8" : "Aug", "9" : "Sep", "10" : "Oct", "11" : "Nov", "12" : "Dec" };
    var custClass = oMonths[oGroup.key] +"MonthHdr";
    return new sap.m.GroupHeaderListItem({
        title: oMonths[oGroup.key],
        upperCase: false
    }).addStyleClass(custClass);
},
//Navigate to previous month list item
scrollToPreviousMonth: function(){
    this.scrollToItem(".JanMonthHdr");
},
//Navigate to current month list item
scrollToCurrentMonth: function(){
    this.scrollToItem(".FebMonthHdr");
},
//Navigate to next month list item
scrollToNextMonth: function(){
    this.scrollToItem(".MarMonthHdr");
},
//Helper function to scrolling to the corresponding list item
scrollToItem: function(sItem) {
    var oScrollList = this.byId("oScrollContainer"),
        oList = this.byId("monthList"),
        sItemId = jQuery(sItem).attr("id"),
        oItem = sap.ui.getCore().byId(sItemId);

    oList.setSelectedItem(oItem);
    oScrollList.scrollToElement(oItem, 2000);       
},

输出

sap.m.List 滚动到特定项目

sap.m.List Scroll to specific Item

javascript

list

sapui5