自定义尺寸Winjs Listview项目Winjs WP

Question

我是Winjs的新手，之前从事Android和iOS开发工作。

我需要制作一个包含自定义尺寸项目的列表视图，如http://try.buildwinjs.com/#listview:customlayout所示 我实现了这个，但在我的Windows手机中，基本的listitem大小保持不变，只有内容大小不同。按照屏幕截图观察视觉效果：

任何人都可以告诉我如何实现这一目标。我也研究过细胞西红柿。但是无法正确理解它。

由于

Answer 1

你需要像这样创建一个itemTemplate：

<div id="lstTemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">

        <img class="image" src="/images/Store.png" />

        <p class="lblName" data-win-bind="textContent:Name"></p>

        <p class="lblPrice" data-win-bind="textContent:Price"></p>

    </div>
</div>

<div id="lstMain"
                 class="lstContainer"
                 data-win-control="WinJS.UI.ListView"
                 data-win-options="{
                 itemDataSource:DataFinal.listItems.dataSource,
                 itemTemplate:select('#lstTemplate'),
                 layout:{type:WinJS.UI.ListLayout}}">
 </div>

然后使用CSS，您可以格式化项目的高度，如下所示：

.fragmentPrincipal .lstContainer .item {
   height: 21.6875em;
}

注意：请记住向CSS添加命名空间类，因此导航到另一个页面后不会覆盖您的样式

如果您的目标是所有Windows手机分辨率，我建议您使用较少的内容以便轻松添加横向和纵向样式，还要记住缩放所有图像，以便可以在所有WP分辨率上正确呈现应用