如何在Famo.us中的表面之間滑動？

Question

使用以下Famo.us示例代碼添加了10個以100％寬度和高度垂直顯示的表面，如何添加在它們之間滑動的功能，類似於iOS主屏幕上的滑動方式？

define(function(require, exports, module) { 
    var Engine   = require("famous/core/Engine"); 
    var Surface   = require("famous/core/Surface"); 
    var SequentialLayout = require("famous/views/SequentialLayout"); 

    var mainContext = Engine.createContext(); 

    var sequentialLayout = new SequentialLayout({ 
     direction: 0 
    }); 
    var surfaces = []; 

    sequentialLayout.sequenceFrom(surfaces); 

    for (var i = 0; i < 10; i++) { 
     surfaces.push(new Surface({ 
      content: "Surface: " + (i + 1), 
      size: [window.innerWidth, window.innerHeight], 
      properties: { 
       backgroundColor: "hsl(" + (i * 360/10) + ", 100%, 50%)", 
       lineHeight: window.innerHeight/10 + "px", 
       textAlign: "center" 
      } 
     })); 
    } 

    mainContext.add(sequentialLayout); 
}); 

Answer 1

你可以使用Scrollview類啓用分頁來實現iOS主屏幕的效果。這使您可以實際從一個頁面拖動到另一個頁面或滑動。我相信EdgeSwapper類將只處理滑動。

這裏就是你們的榜樣修改爲使用滾動型分頁..

希望這有助於！

var Engine   = require("famous/core/Engine"); 
var Surface   = require("famous/core/Surface"); 
var Scrollview  = require("famous/views/Scrollview"); 

var mainContext = Engine.createContext(); 

var scrollview = new Scrollview({ 
    direction: 0, 
    paginated: true 
}); 
var surfaces = []; 

scrollview.sequenceFrom(surfaces); 

for (var i = 0; i < 10; i++) { 
    surface = new Surface({ 
     content: "Surface: " + (i + 1), 
     size: [window.innerWidth, window.innerHeight], 
     properties: { 
      backgroundColor: "hsl(" + (i * 360/10) + ", 100%, 50%)", 
      lineHeight: window.innerHeight/10 + "px", 
      textAlign: "center" 
     } 
    }); 

    surface.pipe(scrollview); 

    surfaces.push(surface); 
} 

mainContext.add(scrollview); 

Answer 2

你看過EdgeSwapper嗎？我認爲這可能是你正在尋找的一個例子： https://github.com/Famous/examples/blob/master/src/examples/views/EdgeSwapper/example.js