ListView 没有滚动条

Question

滚动条有问题

体内我有这样的div：

<div id="PageBody"></div>

我用 javascript

加载我的列表视图

WinJS.UI.Pages.render("./pagebody.html",document.getElementById("PageBody"), null, true);

PageBody.html 看起来像这样

<!-- Simple template-->
<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="smallListIconTextItem-Detail">
            <h4 class="win-h4" data-win-bind="textContent: title"></h4>
            <h6 class="win-h6" data-win-bind="textContent: text"></h6>
        </div>
    </div>
</div>

<!-- listview-->
<div id="listView"
     class="win-selectionstylefilled"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{
            itemDataSource: Sample.ListView.data.dataSource,
            itemTemplate: select('.smallListIconTextTemplate'),
            selectionMode: 'none',
            tapBehavior: 'none',
            layout: { type: WinJS.UI.ListLayout }
    }">
</div>

现在，如果我的列表视图包含更多项目（无法一次显示所有项目），则滚动条不会出现，我无法访问隐藏元素。

如果我使列表视图正常（不将其加载到 div），滚动将正常工作。但是，我需要将不同的列表视图或其他控件加载到 div（取决于用户想要的数据）

我怎样才能解决这个问题？

更新：我添加到 "PageBody" div 这个：style="overflow: scroll" 滚动条显示，但不起作用（你无法滚动）

更新 2：网格布局滚动有效，但列表布局仍然无效

Answer 1

将此 CSS 放入正在填充数据的 div 中：

  overflow-y:auto;

JSFiddle 给它。

Answer 2

问题是

height: 100%

在 .css 文件中

我删除了它，但唯一的问题是如何使列表视图适合页面。我在javascript.

内处理了

window.addEventListener("resize", function () {
            var listviewdiv = document.getElementById("listView");
            var h = window.innerHeight;

            listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
        });

然后剩下的唯一问题是最初如何在创建和加载应用程序时执行此操作（上面的代码仅在用户调整大小后有效 window）

对于这种情况，我输入了以下代码：

WinJS.UI.Pages.render("./PageBody.html", PageBody).done(function () {
            var listviewdiv = document.getElementById("listView");
            var h = window.innerHeight;

            listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
        });

ListView 没有滚动条

ListView doesn't have scrollbar

javascript

html

css

winjs

uwp