如何在famo.us的ScrollView中創建表面之間的空白空間？

Question

我創建了一個水平滾動視圖並添加了一些曲面。當我滾動（滑動）視圖時，我想在曲面之間留出一個空白空間。我已經嘗試在曲面和滾動視圖的屬性中設置邊距，填充，邊框等等，但無論如何，曲面都保持連接在一起。

有誰知道我該如何做到這一點？

Answer 1

這可以通過幾種方式完成。 nonfamo.us方法將添加曲面並使用Content HTML創建邊距。爲了舉例，我會假設你想要一個只需要一些餘量的曲面列表！

我知道SequntialLayout中的itemSpacing，並且很驚訝在ScrollView中也找不到這樣的東西。所以要解決這個問題，我只需將所有表面添加到SequentialLayout中，然後將其添加爲滾動視圖中的唯一項目。

另請注意我添加了一個背景表面，捕獲在表面之間發生的鼠標事件！

這是我做的..希望它有幫助！

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

var mainContext = Engine.createContext(); 

var bg = new Surface({ size:[undefined,undefined] }); 

var scrollview = new Scrollview(); 
var scrollSurfaces = []; 

scrollview.sequenceFrom(scrollSurfaces); 

var sequentialLayout = new SequentialLayout({itemSpacing:20}); 
var surfaces = []; 
sequentialLayout.sequenceFrom(surfaces); 

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

    surface.pipe(scrollview); 
    surfaces.push(surface); 
} 

scrollSurfaces.push(sequentialLayout); 

bg.pipe(scrollview); 

mainContext.add(bg); 

mainContext.add(scrollview); 

Answer 2

我想用ContainerSurface較好，使用許多containsurfaces遏制surface.You應該在蘋果iPhone模仿5.In其他環境中，應該調整scrollModifier的起源來解決。

define(function(require, exports, module) { 
    var Engine   = require("famous/core/Engine"); 
    var Surface   = require("famous/core/Surface"); 
    var Transform  = require("famous/core/Transform"); 
    var View    = require('famous/core/View'); 
    var StateModifier = require('famous/modifiers/StateModifier'); 
    var Scrollview  = require("famous/views/Scrollview"); 
    var Modifier   = require("famous/core/Modifier"); 
    var ContainerSurface = require("famous/surfaces/ContainerSurface"); 


    var mainContext = Engine.createContext(); 

    var scrollview = new Scrollview({ 
     direction: 0, 
     paginated: 'true', 
     pageStopSpeed: 2 
    }); 

    var scrollnodes = []; 
    scrollview.sequenceFrom(scrollnodes); 

    for (var i = 0; i < 40; i++) { 

     var container = new ContainerSurface(); 

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

     // wrong 
     // will return temp as scrollnode, it will ignore the container 
     // var scrollnode = container.add(temp) 

     // this is right 
     container.add(temp); 
     var scrollnode = container; 

     temp.pipe(scrollview); 
     scrollnodes.push(scrollnode); 

    } 

    var scrollModifier = new StateModifier({ 
     origin: [0.07, 0.04] 
    }); 

    mainContext.add(scrollModifier).add(scrollview); 
}); 

Answer 3

您也可以使用FlexScrollView，它支持spacing選項來實現這一目標：

var scrollView = new FlexScrollView({ layoutOptions: { spacing: 10 } });

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md https://github.com/IjzerenHein/famous-flex