Question

我有一个简单的WINJS flipview。从外部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>

这与演示示例flipview Data

相关联

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

}）（）;

上面的原始问题是第一个图像BUG FIX：将其添加到onready上。如果没有自定义动画，则此方法有效。

  var proxyObject;
  proxyObject = new WinJS.Binding.as({
    itemTemplate: tutorialTemplate,
    customAnimations: false
  });

tutorialFlipView.winControl.itemTemplate = tutorialTemplate;

Answer 1

没有内置命令可以旋转。 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图像网址，则当flipview显示页面时，无法保证加载图像。如果图像数量很少，最好使用winjs.xhr下载它们以确保它们位于缓存中，然后加载flipview。

SimpleFlip查看从json返回的第一个图像不会立即显示在winjs中

1 个答案: