代码之家  ›  专栏  ›  技术社区  ›  Sly_TheKing

ListView没有滚动条

  •  0
  • Sly_TheKing  · 技术社区  · 9 年前

    滚动条有问题

    在身体内部,我有这样的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>
    

    现在,如果我的列表视图包含更多的项目(不能同时显示所有项目),则滚动条不会出现,并且我无法访问隐藏的元素。

    如果我使listview正常运行(不将其加载到div中),滚动工作正常。然而,我需要将不同的列表视图或其他控件加载到该div中(取决于用户想要的数据)

    我该如何解决这个问题?

    更新:我在“PageBody”div中添加了this:style=“overflow:scroll” 滚动条显示,但不起作用(无法滚动)

    UPDATE2:使用网格布局滚动可以,但仍然使用列表布局无法

    2 回复  |  直到 9 年前
        1
  •  1
  •   Rahul    9 年前

    将此CSS放入数据填充的div中:

      overflow-y:auto;
    

    JSFiddle 对于它。

        2
  •  0
  •   Sly_TheKing    9 年前

    问题是

    height: 100%
    

    在.css文件中

    我删除了它,但唯一的问题是如何使列表视图适合页面。我在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");
            });