如何在AppMaker中滚动列表？

Question

我有一个列表小部件，每页有五行。当用户转到下一页时，我重新加载页面（通过使用新页码对数据源进行卸载/加载）并且工作正常。但是，列表保持滚动到底部。如何将列表滚动到顶部，以便用户不必？

我尝试了在标准HTML中工作的方法但它们在AppMaker中不起作用，我找不到任何关于如何执行此操作的文档。

感谢您的任何提示或指示。

Answer 1

我意识到这是一篇过时的文章，但是对于将来的访问者来说，这对我有用-您需要将列表的索引设置为零。 App Maker可以确保将上一个选定的项目滚动到视图中，并在导航中进行维护。

您可以通过传递在加载列表后运行的回调函数来执行此操作。对我来说，我从一个过滤列表的下拉小部件中重新加载了列表，因此在onValueChange事件中添加了：

// Load datasource
widget.datasource.load(function() {
  // Set index to 1 to ensure we scroll to top of list
  app.datasources.YOURDATASOURCE.selectIndex(0);
});

Answer 2

您可以通过执行以下操作来实现所需的行为：

1. 在大纲中，找到 TablePanel 小部件，然后选择列表：TableBody 小部件

2.在属性编辑器中，滚动到事件部分，然后单击 onDataLoad 事件值。然后单击自定义操作。

1. 输入此代码var elem = widget.getElement(); elem.scrollTop = 0;，使其看起来像这样

2. 确保更改已保存，然后预览您的应用，它应该可以正常工作。如果您需要其他内容或者它不起作用，请告诉我。

Answer 3

对我而言，Morfinismo的答案无效，但以下内容有效： 在样式编辑器中，为List元素添加CSS：

.app-pageName-nameOfTheListWidget {
    overflow-y: auto;
}

在布局下的属性编辑器中，设置最大高度。