WinJS ListView自动调整

我想在WinJS中显示一个从不显示它自己的滚动条的ListView。我希望它水平增长到其父容器中。我实现它的方式基本上是通过在ListView上设置最小宽度的CSS属性。在初始加载时，这个工作完美无瑕。当附加数据加载到后台数据源（在这种情况下是WinJS.Binding.List）时，我期望ListView绘制元素并调整其大小。相反，ListView绘制元素并添加自己的滚动水平条。大约一两秒钟后，突然间ListView被自动调整大小并放入父容器中。WinJS ListView自动调整

如何在添加元素后立即调整大小？强制布局将无法正常工作，因为它会重绘每一个项目，并且我将很多元素填充到此ListView中。

来源

2012-11-21 Szymon Rozga

我使用了在div上找到的how to detect overflow技术。基本上，我添加所有新的数据项后，我确保增加ListView的父div的大小，直到ListView div不再有溢出。

编辑：所以最终我决定反对这个策略，因为这篇文章的建议。我查看了内置的Grid项目模板，并找出了如何确保列表视图能够正确地适合整个屏幕。我使用了下面的CSS。

#listid{ 
    height: 100%; 
    position: relative; 
    width: 100%; 
    z-index: 0; 
} 
#section[role=main]{ 
    margin-left: 0; 
} 

#listid .win-horizontal.win-viewport .win-surface { 
    margin-left: 120px; 
    margin-right: 115px; 
}

来源

2012-11-21 16:11:39

根据您的表现档案，这可能会损害表现。听ListView上的loadStateChanged事件可能会更好，并使用您用来计算它的方法。如果您稍后愿意接受可能的破损，您也可以深入DOM并找到实际改变大小的元素，并使用它的大小来设置所需的宽度。最终，我确实质疑你想要的行为 - 在我发布的应用程序中，它最终是一种相当糟糕的体验。 –

我同意Dominic，你应该尝试听ListView控件上的loadingStateChanged事件。有可能它不会立即触发，在这种情况下，我会在列表中显示进度元素并等待它重新绘制，然后移除进度。

来源

2012-11-21 20:07:38

WinJS ListView自动调整

回答

相关问题