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。