使用以下 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);
});
您可以使用启用分页的 Scrollview 类来实现 iOS 主屏幕的效果。这允许您实际从一个页面拖动到另一页面或滑动。我相信 EdgeSwapper 类只会处理滑动。
这是修改为将 Scrollview 与分页一起使用的示例。
希望这可以帮助!
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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)