ListView没有滚动条

debugcn 发表于 Dev

狡猾的国王

我的滚动条有问题

在体内，我有这样的股利：

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

在那里，我用javascript加载了listview

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”滚动条显示，但是不起作用（u无法滚动）

UPDATE2：可以使用网格布局滚动，但是仍然不能使用列表布局

狡猾的国王

问题是

height: 100%

在.css文件中

我删除了它，但是然后唯一的问题是如何将listview适应页面。我在javascript中处理过。

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

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

然后剩下的唯一问题是创建和加载应用程序时的初始操作（上面的代码仅在用户调整窗口大小之后有效）

对于这种情况，我将以下代码放入：

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");
        });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。