如何滚动一个大的表面?(例如一篇文章)

How to scroll a big surface ? (ex. an article)

本文关键字：文章 一篇 表面 一个 何滚动 滚动      更新时间：2023-09-26

在我的原型famo。我们的应用程序，我有一个HeaderFooter视图显示一个"关于"页面作为其内容。这个页面有很多文字，不适合手机屏幕。

然而,

famo。我们不会滚动这个表面。

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

那么我如何在famo中使一个简单的大表面可滚动呢?我们?

有两种方法可以做到这一点。如果能看到你所做的尝试就好了，但我还是要提出这两个建议。

1)更简单的非著名方法是简单地将属性overflow:'scroll'添加到body surface..就像. . 

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

2);我们使用滚动视图的方式也可以做到，但是如果你在滚动视图中添加一个可变长度的文章，你会遇到另一个真实大小的问题。也就是说，当您使用true-sizing时，scrollview不知道视图有多大，并且不能正常滚动。这里是一个快速的例子，在页眉页脚内获得滚动视图。注意，我有一个函数可以调用曲面部署。这允许我使用真正的大小，然后在创建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);
相关文章：