我有一个简单的 WINJS 翻转视图。从外部 json 文件加载了 5 张图像。除第一个图像外,所有图像都会立即加载,第二个问题是否有一个简单的命令可以自动将它们设置为旋转?
所以我们使用的是单页模型应用程序。这是一个小促销滑块,我想放在一页上并旋转。我已经尝试了一切,包括演示,但第一项总是未定义。
我什至尝试删除第一张图片,但第一项总是未定义。我现在已经花了几天的时间,但运气并不好。
<div id="promoTemplate" data-win-control="WinJS.Binding.Template" style="display: none" >
<div class="overlaidItemTemplate">
<img class="image" data-win-bind="src: picture" />
<div class="overlay">
<h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
</div>
</div>
</div>
<div id="promoFlipView" class="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource: ActivityPromoData.bindingList.dataSource, itemTemplate: select('#promoTemplate') }">
</div>
这是连接到演示示例翻转视图数据
//// 本代码和信息按“原样”提供,不提供 //// 任何形式的明示或暗示保证,包括但不限于 //// 适销性和/或适用性的暗示保证 / /// 特殊用途。//// //// 版权所有 (c) Microsoft Corporation。版权所有
(function () { "使用严格";
// This is an array that will be used to drive the FlipView in several
// scenarios. The array contains objects with the following attributes:
//
// type - There are two types that are used:
//
// item -
// The type for simple items. It informs the custom
// renderer that their is a title and picture that needs
// to be rendered.
//
// contentsArray -
// This is used for creating a table of contents. It
// informs the renderer that an array of data is present
// for use in constructing the Table of Contents.
//
// title - The title of a photo to be displayed.
//
// picture - The location of the photo to be displayed.
var array = [
{ 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 bindingList = new WinJS.Binding.List(array);
WinJS.Namespace.define("ActivityPromoData", {
bindingList: bindingList,
array: array
});
var e = ActivityPromoData.bindingList.dataSource;
})();
上面的原始问题是FIRST IMAGE BUG FIX:将其添加到onready。如果没有自定义动画,这可以工作。
var proxyObject;
proxyObject = new WinJS.Binding.as({
itemTemplate: tutorialTemplate,
customAnimations: false
});
tutorialFlipView.winControl.itemTemplate = tutorialTemplate;