着名的:scrollview中的scrollview

时间:2014-04-17 23:11:24

标签: scrollview famo.us

我尝试创建类似于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);

    });

2 个答案:

答案 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