SimpleFlip查看从json回来的第一张图片不会立即显示在winjs中

Question

我有一个简单的WINJS flipview。有5个图像从外部json文件加载。所有的图像立即加载，除了第一个，第二个问题是有一个简单的命令来自动设置这些旋转？

因此，我们正在使用单页模型的应用程序。这是一个我想放在一个页面上旋转的小促销滑块。我已经尝试了一切，包括只是演示，但第一个项目总是回来undefined。

我什至尝试删除第一个图像，但第一个项目总是回来undefined。我已经花了几天的时间，没有太多的运气。

<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数据

////此代码，所提供之信息“按原样”而不 担保////任何种类，明示或暗示，包括但不限于 ////暗含的有关适销性和/或适用性的担保，具体涉及 ////特定用途。 //// ////版权所有（c）Microsoft Corporation。保留所有权利

（函数（）{ “使用严格的”;

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

}）（）;

这里上面的原始问题是第一个图像错误修正：加入这个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图像url，则在flipview显示页面时不能保证图像被加载。如果图像数量很少，最好使用winjs.xhr下载它们以确保它们处于缓存中，然后加载flipview。