WinJS 列表 GridLayout header 以上列表

Question

如何使用 GridLayout 将 header 放入列表视图中。 当我将 header 放在列表视图上方时，我的 header 占据了一些高度并且列表视图中的最后一行未显示，因为 header.

我也找到了直接在列表视图中设置header的方法：

data-win-options="{ header: select('.header') }"> 

有了这个，我的 header 位于列表的左侧，而不是列表上方，就像正常的 header 应该的那样。 我没有看到上面的 listview GridLayout 和 header 部分的任何示例（例如，我想将搜索框和标题放在 header 中）。

这有什么例子吗？

Answer 1

这里有两个解决方案：

1) This is answer I get from Microsoft:

In the list view the WinJS.UI.GridLayout's viewport is loaded horizontally. You need to change the viewport's orientation to vertical. You can do this by attaching the event onloadingstatechanged event.

args.setPromise(WinJS.UI.processAll().then(function () {
                listview.winControl.onloadingstatechanged = function myfunction() {
                    if (listview.winControl.loadingState == "viewPortLoaded")
                    {
                        var viewport = listview.winControl.element.getElementsByClassName('win-viewport')[0];
                        viewport.className = 'win-viewport win-vertical';
                    }
                }
            }));

and change the class win-horizontal to win-vertical.

2) 添加标准 html header 和下面的列表 header 也可以解决问题，没有 data-win-options="{ header: select('.header') }" 属性。

在这种情况下，我们需要计算列表的高度：

 .list {
    height: calc(100% - headerHeight);
 }