我尝试创建类似于BBC新闻原生应用的布局(使用famous.js);一个垂直的ScrollView,其中有许多水平的ScrollViews。我和他们两个都在工作'在所有渲染和水平滚动条完美运行的范围内。我的问题是,如果用户在水平ScrollView中滑动表面,则垂直滚动事件不会触发。如果我触摸水平滚动条外的区域,垂直滚动条将完成其工作并垂直滚动
有谁知道我错过了什么?我觉得可能需要一个RenderNode,但到目前为止还没有运气。我刚刚掌握了Famous。到目前为止我所看到的是惊人的,但无法弄清楚这一点真的让我感到...
如果有人可以提供帮助,优步提前感谢... /*globals define*/
define(function(require, exports, module) {
// import dependencies
var Modifier = require('famous/core/Modifier');
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var HeaderFooterLayout = require('famous/views/HeaderFooterLayout');
var Scrollview = require('famous/views/Scrollview');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var mainContext = Engine.createContext();
var layout = new HeaderFooterLayout({
headerSize: 50,
footerSize: 50
});
// create app header and add to layout
var appHeader = new ContainerSurface({
size: [undefined, 50],
classes: ['app-header']
});
appHeader.add(new Surface({
size: [undefined, 50],
content: 'Site Name',
classes: ['app-header__title'],
properties: {
lineHeight: '50px',
textAlign: 'center'
}
}));
layout.header.add(appHeader);
// create page container surface
var page = new ContainerSurface({
properties: {
top: '0'
}
});
// returns a horizontal ScrollView containing
function createCategory() {
var categoryScroll = new Scrollview({
direction: 0,
});
var surfaces = [];
categoryScroll.sequenceFrom(surfaces);
for (var i = 0, temp; i < 7; i++) {
var temp = new Surface({
size: [128, 128],
content: 'surface' + (i + 1),
properties: {
backgroundColor: '#fff',
borderColor: '#303030',
borderStyle: 'solid',
borderWidth: '0px',
borderRightWidth: '4px',
borderLeftWidth: '4px'
}
});
temp.pipe(categoryScroll);
surfaces.push(temp);
}
return categoryScroll;
}
// returns a vertical page scroll
function createPageScroll() {
// create array of horizontal ScrollViews
categories = [];
for (var i = 0; i < 7; i++) {
categories.push(createCategory());
};
var pageScroll = new Scrollview();
var surfaces = [];
for (var i = 0; i < 7; i++) {
temp = new ContainerSurface({
size: [window.innerWidth, 136],
});
temp.add(categories[i]);
surfaces.push(temp);
pageScroll.sequenceFrom(surfaces);
temp.pipe(pageScroll);
};
return pageScroll;
}
layout.content.add(createPageScroll());
mainContext.add(layout);
});
答案 0 :(得分:4)
我看到你想通了,但我想我会为需要起点的人发布一个干净的工作示例..所以这里是......
要回答这个问题,是的,您需要将事件从曲面传输到每个滚动视图
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var View = require("famous/core/View");
var Scrollview = require("famous/views/Scrollview");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var context = Engine.createContext();
var surfaces1 = [];
var surfaces2 = [];
var scrollers = [];
scroll_v_cont = new ContainerSurface({
size:[300,300],
properties: { overflow: 'hidden' }
});
var scroll_v = new Scrollview({ direction: 1 });
scroll_v.sequenceFrom(scrollers);
scroll_v_cont.add(scroll_v);
var scroll_h1_cont = new ContainerSurface({
size:[300,300],
properties: {overflow: 'hidden'}
});
var scroll_h1 = new Scrollview({ direction: 0});
scroll_h1.sequenceFrom(surfaces1);
scroll_h1_cont.add(scroll_h1);
var scroll_h2_cont = new ContainerSurface({
size:[300,300],
properties: { overflow: 'hidden'}
})
var scroll_h2 = new Scrollview({ direction: 0})
scroll_h2.sequenceFrom(surfaces2);
scroll_h2_cont.add(scroll_h2);
scrollers.push(scroll_h1_cont);
scrollers.push(scroll_h2_cont);
for (var i = 0; i < 4; i++) {
var surface1 = new Surface({
content: "Surface: " + (i + 1),
size: [300, 300],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface1.pipe(scroll_v);
surface1.pipe(scroll_h1);
surfaces1.push(surface1);
var surface2 = new Surface({
content: "Surface: " + (i + 1),
size: [300, 300],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8 + (360 / 8)*4) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface2.pipe(scroll_v);
surface2.pipe(scroll_h2);
surfaces2.push(surface2);
};
context.add(scroll_v_cont);
答案 1 :(得分:1)
着名的flex FlexScrollView支持垂直和放大将一个scrollview嵌入另一个时,水平滚动限制。它在FlexScrollView教程的底部有更详细的描述:
https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md