Question

我正在尝试从底部扩展Windows 8 listView。基本上，我有一个listView填充了一些项目。我希望这些项目从listView容器的底部开始。当我添加到列表中时，我希望它们向上移动。一旦listView容器达到/填充所需的高度，我就希望listView滚动条变得可用。

现在，我可以在屏幕底部放置一个listView，并将其设置为仅包含我的项目的高度。但是当我添加项目时，它只是保持相同的高度并添加滚动条。如果我创建一个listView我想要的最终高度，只有少数项目没有填满整个高度，那么我的项目从顶部开始。

任何想法，如果这是可能的？

Answer 1

listview仅支持使用position: absolute在列表视图中布局内容的GridLayout and ListLayout（在调试器中使用DOM资源管理器查看）。 css或js不太可能来帮助自定义listview布局，以满足从底部到顶部布局的要求。可以尝试查看是否为listview构建自定义布局管理器。但afaik - 没有记录。

您可能需要在custom winjs control进行构建。自定义控件可以使用-ms-flexbox显示样式（css3 flex layout），它允许将div中的内容打包到最后。自定义控件需要绑定到dataSource，并使用给定的项模板呈现项目。

示例：您可以看到页面内容元素在页面末尾打包。 HTML：

<div class="flexlayout fragment">
    <header role="banner">
        <button class="win-backbutton" disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle">flexlayout page</span>
        </h1>
    </header>
    <section role="main">
        <div class="content">
            <h3>page content goes here.</h3>
            <h3>page content goes here.</h3>
            <h3>page content goes here.</h3>
        </div>
    </section>
</div>

的CSS：

.flexlayout.fragment .content
{
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-pack: end;

}

.fragment {
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

从底部扩展listView

1 个答案: