0

我有一个简单的 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;

4

1 回答 1

0

没有内置命令可以旋转。setInternval()可用于此。

var timerId = setInternal(function() 
{
    if (flipview.winControl.count - 1 == flipview.winControl.currentPage)
        flipview.winControl.currentPage = 0;
    else
        flipview.winControl.next();
}, slideshowInternal);

// to stop slideshow
clearInterval(timerId);

这假设页面之间没有复杂的转换（例如：KENBURNS）。如果需要，则涉及更多问题，最好考虑在 web 上使用一些现有的 javascript sdk 并集成到自定义 winjs 控件中。集成自定义页面过渡动画时，flipview 控件无法正常工作。

关于图像未加载 - html/js 代码片段将有助于回答它。

如果<img>使用标签并将其绑定到http图片url，则在flipview显示页面时不保证加载图片。如果图像数量很少，最好下载它们winjs.xhr以确保它们在缓存中，然后加载翻转视图。

于 2013-06-02T10:00:44.957 回答