html - WinJS List GridLayout 标题在列表上方

Question

如何使用 GridLayout 将标题放在 ListView 中。当我将 header 放在 ListView 上方时，我的 header 占据了一定的高度，并且由于 header 的原因， ListView 中的最后一行未显示。

我还找到了一种直接在 ListView 中设置标题的方法:

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

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

这有什么例子吗？

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 标题和标题下方的列表来解决，而无需 data-win-options="{ header: select('.header') }"属性。

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

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