快速入门：添加 FlipView (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

许多应用都显示可供用户浏览的项目列表。这些列表可以从数据库、Web 或 JSON 数据源获取其数据。 WinJS 提供 FlipView 控件只是为了实现上述目的。

FlipView 控件。

先决条件

快速入门：添加 Windows JavaScript 库控件和样式

什么是 FlipView？

FlipView 是一种 WinJS 控件，可让你用来逐一浏览项目集合。它非常适合显示图像库。

FlipView 从 IListDataSource 获取其数据。 WinJS 提供了多种类型的 IListDataSource 对象：

你可使用 List 从一个数组创建 IListDataSource。
你可使用 StorageDataSource 访问有关文件和目录的信息。

还可以创建自定义数据源，以便连接到某些其他类型的数据提供程序，如 Web 服务或数据库。有关的详细说明，请参阅如何创建自定义数据源。

创建简单的 FlipView

将指向 WinJS 的引用添加到你的 HTML 文件（如果文件中还没有这些引用）。


<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

此示例展示了你在 Microsoft Visual Studio 中创建新的“空白应用程序”项目时生成的 default.html 文件的 HTML。请注意，它已经包含了对 WinJS 的引用。


<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

此示例使用浅色样式表而不是深色样式表，所以如果你想要你的应用符合这些示例，请将此引用：

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

...更改为：

     <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

在 HTML 文件中，创建一个 div 元素并将它的 data-win-control 属性设置为“WinJS.UI.FlipView”。
```
<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
></div>
```
在 HTML 文件附带的 JavaScript 代码中，当加载 HTML 时调用 WinJS.UI.processAll 函数。
```
WinJS.UI.processAll();
```
下一示例展示了当你创建新的“空白应用程序”项目时所创建的 default.html 文件附带的 default.js 文件。
```
// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll();
        }
    };

    app.start();
})();
```
当你将 FlipView 添加到起始页 (default.html) 后此示例才生效。如果将 FlipView 添加到页面控制，则无需调用 WinJS.UI.processAll，因为该页面控制将为你执行调用。如果要向你自己的自定义 HTML 中添加 FlipView，可以使用 DOMContentLoaded 事件来调用 WinJS.UI.processAll。有关激活控件的详细信息，请参阅快速入门：添加 WinJS 控件和样式。
**重要说明：**设置 FlipView 的高度和宽度。为了能够呈现 FlipView，必须用绝对值指定它的高度。将此 CSS 添加到包含 FlipView 的 HTML 页的 CSS 样式表中：
```
#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}
```

此代码会创建空的 FlipView。如果运行该应用，则将看到一个空的控件。在下一部分中，为 FlipView 创建一些用于显示的数据。

定义数据

使用代码在单独的 JavaScript 文件中创建数据源，这样可使数据源更易于维护。在此部分中，你可以了解如何为数据创建 JavaScript 文件，如何创建 List 以及如何使用 WinJS.Namespace.define 函数使得其余应用可以访问该数据。

使用 Visual Studio 将数据文件添加到项目中。在解决方案资源管理器中，右键单击项目的 js 文件夹，然后选择“添加”>“新建项”。****即会出现“添加新项”对话框。
选择“JavaScript 文件”****。为其命名为 "dataExample.js"。单击“添加”以创建文件。Visual Studio 创建名为 dataExample.js 的空白 JavaScript 文件。
打开 dataExample.js。创建一个匿名函数并打开严格模式。

如为基本应用编写代码中所述，通过在匿名函数中包装 JavaScript 代码来封装该代码是一个好方法，并且使用严格模式同样也是一个好方法。
```
(function () {
    "use strict"; 





})();
```
创建数据数组。以下示例将创建一个对象数组。每个对象都有三个属性：type、title 和 image。
```
(function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

})();
```
注意如果你要按照你的代码操作，则可以将图片更改为你的本地计算机上的文件，也可以通过下载 HTML FlipView 控件示例（它与此处的示例不是同一个示例，但它们使用相同的图像）来获取图片。你还可以在不添加图像的情况下运行此示例—它仍将运行。

使用数组创建 List 对象。

(function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

通过声明命名空间并添加 List 作为其公共成员来公开 List。

由于你刚编写的代码封装在一个匿名函数中，因此该代码的任何部分都不能公开访问。（这就是为什么使用匿名函数的部分原因：为了使专用数据保持私有。）为了使你的 FlipView 能够访问 List，你必须使其可公开访问。实现此目的的一种方法就是使用 WinJS.Namespace.define 函数创建一个命名空间并添加 List 作为它的一个成员。

WinJS.Namespace.define 函数采用两个参数：要创建的命名空间的名称和包含一个或多个属性/值对的对象。每个属性是成员的公用名称，而每个值是在私有代码中要公开的基础变量、属性或函数。

以下示例创建一个名为 DataExample 的命名空间，该命名空间公开一个名为 itemList 且返回 List 的公共成员。
```
(function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    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); 

})();
```

你创建了一个可以由你的 FlipView 访问的数据源。在下一部分中，需要将数据连接到 FlipView。

将数据连接到 FlipView

在 FlipView 所在 HTML 文件的 head 部分中，将引用添加到刚创建的数据文件 (dataExample.js) 中：

<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

使用在上一部分中创建的数据设置 FlipView 控件的 itemDataSource 属性。

itemDataSource 属性接受 IListDataSource 对象。List 对象不是 IListDataSource，但该对象确实具有 dataSource 属性，该属性返回自身的 IListDataSource 版本。

若要连接数据，请将 FlipView 控件的 itemDataSource 属性设置为 DataExample.itemDataList.dataSource：
```
<div id="basicFlipView"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>  
```

运行该应用。FlipView 显示数据源中的属性和值：

显示没有模板的数据源内容。

这完全不是我们想要的外观。我们只想显示标题字段的值，而且希望显示实际图像（而不是指向图像的路径）。若要获取我们所需的呈现外观，需要定义 Template。下一个步骤会显示方法。

定义项模板

此时，FlipView 具备所需的数据，但不了解如何显示该数据。这种情况下，需要使用项模板。创建模板的方式有以下两种：可以使用标记定义 WinJS.Binding.Template，也可以创建模板化功能。此示例会创建标记模板。（有关创建模板函数的信息，请参阅 itemTemplate 属性。）

WinJS.Binding.Template 可轻松创建：定义要用于显示每个列表项的标记，然后指示每个数据字段的显示位置。

在 HTML 中，创建 WinJS.Binding.Template 控件并为其分配 ID。以下示例使用 ID "ItemTemplate"。
```
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">

</div>
```
注意你必须先定义模板然后才能使用它，因此请在你的 FlipView 的 HTML 之前添加我们的模板的 HTML。

WinJS.Binding.Template 必须具有单个根元素。创建用作模板父内容的 div 元素。

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>

    </div>
</div>

创建 FlipView 将为其包含的每个数据项生成的标记。在上一步中创建的数据包含图像位置、标题和文本，因此，请创建以下元素：
- 用于显示图片字段的 img 元素。
- 用于显示标题字段的 h2 元素。
（以下示例还为了设置格式添加了一个额外的 div 元素）。
```
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#"  />
        <div>
            <h2></h2>
        </div>
    </div>
</div>
```
为显示数据的每个元素设置 data-win-bind 属性。data-win-bind 属性使用以下语法：

data-win-bind="propertyName: dataFieldName"

例如，若要将 img 的 src 属性绑定到 "picture" 字段，使用以下语法：
```
<img data-win-bind="src : picture" />
```
若要设置多个属性，可以使用分号将其分隔：

data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

此示例将模板中的项绑定到其相应的数据字段中。
```
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>
```

若要使用项模板，请将 FlipView 的 itemTemplate 属性设置为项模板（此示例中的 "ItemTemplate"）的 ID。

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>    

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

如果立即运行应用，则绑定的数据会出现在列表中。

数据绑定的 FlipView。

请注意，存在一些格式问题：标题文本未显示。下一部分将展示如何通过设置模板的样式来修复该问题。

设置项的样式

你可以使用 CSS 设置项模板的样式。下一个示例向你在定义项模板部分中定义的模板中添加一些 CSS 类。

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

在你的 HTML 文件的 CSS 样式表中，向该模板中添加以下样式：

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

/**********************************************/
/*                                            */
/* Styles used in the item template           */
/*                                            */
/**********************************************/
.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }

现在，FlipView 看上去如下所示：

设置了样式的 FlipView。注意

更改 FlipView 导航按钮的字体系列将导致按钮中不再包含正确的字形。

更改 FlipView 的方向

默认情况下，FlipView 使用水平方向。你可以通过将 FlipView 的 orientation 属性设置为 "vertical" 来使其垂直显示。

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate, orientation: 'vertical' }"
></div>

垂直方向的 FlipView。

向项模板中添加交互元素

项模板可以包含大多数其他控件，但不能包含 ListView 或另一个 FlipView。

通常，当用户与某个元素交互时，FlipView 会捕捉该交互并使用它来确定用户是选择或调用了某个项目还是正在项目之间平移。为了使交互元素（如控件）接收输入，必须将 win-interactive 类附加到交互元素或它的某个父元素。该元素及其子元素接收交互而且不再针对 FlipView 触发事件。

当你将 win-interactive 附加到项模板中的某个元素时，请确保该元素不填满整个项目，否则用户将无法选择或调用该项目。

若要向项模板中添加交互元素，必须使用模板函数而非 WinJS.Binding.Template。有关具体做法的示例，请参阅 HTML FlipView 控件示例。有关模板函数的详细信息，请参阅 FlipView.itemTemplate 中的示例。

创建上下文控件

FlipView 公开一些方法和事件，使用这些方法和事件可以创建自定义控件，从而让用户了解当前项位于何处，并提供多个在集合中进行导航的机制。下图显示了一组设置了样式的单选按钮，这些按钮通过 pageselected 和 pagevisibilitychanged 事件与 FlipView 保持同步。

具有上下文控件的 FlipView。

有关展示具体做法的代码，请参阅 HTML FlipView 控件示例。

通过