着名：scrollview内滚动

Question

我试图创建一个布局（使用famous.js）类似于BBC新闻本机应用程序;一个垂直的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); 

    }); 

Answer 1

我见你想通了，但我想我会发布一个干净的工作的例子，为任何需要一个起点的人..所以这里是..

要回答这个问题，是的，你需要管道从你的事件表面到每个滚动视图

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

Answer 2

着名的Flex FlexScrollView支持当将一个滚动视图嵌入到另一个滚动视图时的水平滚动限制垂直&。它更详细地在FlexScrollView教程的底部描述：

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