这是Win8 App神圣不可侵犯的头文件：
<head> <meta charset="utf-8"> <title>ListViewExample</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> <!-- ListViewExample references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> <!-- Your data file. --> <script src="/js/dataExample.js"></script> </head>
HTML页面加入以下代码：
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> <div style=" 150px; height: 100px;"> <!-- Displays the "picture" field. --> <img src="#" style=" 60px; height: 60px;" data-win-bind="alt: title; src: picture" /> <div> <!-- Displays the "title" field. --> <h4 data-win-bind="innerText: title"></h4> <!-- Displays the "text" field. --> <h6 data-win-bind="innerText: text"></h6> </div> </div> </div> <div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}"> </div>
js文件夹中dataExample.js中的js文件：
(function () { "use strict"; var dataArray = [ { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" }, { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" }, { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" }, { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" }, { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" }, { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" }, { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" }, { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" }, { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" } ]; var dataList = new WinJS.Binding.List(dataArray); // Create a namespace to make the data publicly // accessible. var publicMembers = { itemList: dataList }; WinJS.Namespace.define("DataExample", publicMembers); })();