2

我正在尝试创建类似于 BBC 新闻本机应用程序的布局（使用 Famous.js）；一个垂直的 ScrollView，其中有许多水平的 ScrollView。我已经“工作”到了一切渲染和水平滚动条完美工作的程度。我的问题是，如果用户在水平 ScrollView 中滑动表面，则不会触发垂直滚动事件。如果我触摸水平滚动条之外的区域，垂直滚动条将完成它的工作并滚动......垂直

有谁知道我错过了什么？我感觉可能需要一个 RenderNode，但到目前为止还没有运气。我刚刚开始接触Famous。到目前为止我所看到的是惊人的，但无法弄清楚这一点真的让我......

如果有人可以提供帮助，请 Uber 提前感谢...

    /*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);

    });
4

2 回答 2

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);
于 2014-04-18T00:52:44.973 回答
1

著名的 flex FlexScrollView 在将一个滚动视图嵌入另一个滚动视图时支持垂直和水平滚动限制。在 FlexScrollView 教程的底部有更详细的描述：

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

于 2015-01-26T18:53:06.150 回答