google-app-maker - 如何在 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小部件并选择List:TableBody小部件

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

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

4. 确保更改已保存，然后预览您的应用程序，它应该可以工作。让我知道您是否需要其他东西或者它是否不起作用。

Answer 3

对我来说，Morfinismo 的回答没有用，但下面的方法起作用了：在样式编辑器中，为 List 元素添加 CSS：

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

并在Layout下的Property Editor中设置Max height。