如何滚动大表面？ （例如文章）

Question

在我的原型famo.us应用程序中，我有一个HeaderFooter视图，其中显示“关于”页面作为其内容。 此页面上有很多文字，这些文字无法在手机屏幕上显示。

但是，famo.us不会滚动此表面。

我试图将表面放入ScrollView中，但没有成功。

那么，如何在famo.us中使可滚动滚动成为一个简单的大表面？

Answer 1

有两种方法可以解决此问题。 很高兴看到您尝试了什么，但是我将提供这两个建议。

1）更简单的非著名方法将是简单地将属性溢出：“滚动”添加到身体表面。

var contentSurface = new Surface({
  size:[undefined,undefined],
  content: scrollContent,
  properties: {
    overflow:'scroll'
  }
});

2）也可以使用滚动视图的famo.us方法，但是如果在滚动视图中添加长度可变的文章，则会遇到另一个问题。 那就是当您使用调整大小时，scrollview不知道视图的大小，并且无法正确滚动。 这是在页眉页脚内部获取滚动视图的快速示例。 注意，我有一个函数可以调用Surface部署。 这使我可以使用真正的大小调整，然后在创建DOM元素后以像素为单位显式设置高度。

这是示例。希望对您有所帮助。

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

var context = Engine.createContext();

var headerFooter = new HeaderFooterLayout();

var scrollview = new Scrollview();

var scrollContent = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt \
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt \
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

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

var contentSurface = new Surface({
  size:[undefined,true],
  content: scrollContent,
  properties: {
    backgroundColor:'red',
    fontSize: '36px'
  }
});

contentSurface.pipe(scrollview);

contentSurface.on('deploy',function(){
  element = contentSurface._currTarget;
  contentSurface.setSize([undefined,element.offsetHeight]);
});

scrollSurfaces.push(contentSurface);

headerFooter.content = scrollview;

headerFooter.header = new Surface({
  size:[undefined,100],
  properties:{
    backgroundColor:'green'
  }
});

headerFooter.footer = new Surface({
  size:[undefined,100],
  properties:{
    backgroundColor:'blue'
  }
});

context.add(headerFooter);