Win8 App使用Listview的简单方法

最近在搞公司的win8 app，说白了就是按照微软的一套东西来写出个什么什么来，其中用到最多的就是图文列表的排列，也就是“Listview”这个东西，下面就简单说说这个东西是怎么来的。

这是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="width: 150px; height: 100px;">

        <!-- Displays the "picture" field. -->
        <img src="#" style="width: 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); 

})();

ok，余下的就是加入图片，你懂的！

微软对这个方法的详解，E文的，挺啰嗦，看完本文在看它的后半部分还是不错的，http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

写在最后：

话说我本人并不看好Win8 App和它的模式，不过就开发Win8 App来说，各种问题的暴露也给开发带来不少趣味，喜欢的同学可以研究下，写个自己网站的App在现今来看还是不错的，因为Win8 App的商店现今差不多是空的，赶时间吧！

转载请注明：大前端 » Win8 App使用Listview的简单方法

河南新闻网

Win8 App使用Listview的简单方法

相关推荐