famous: scrollview within scrollview

Question

J'essaie de créer une mise en page (en utilisant famous.js) similaire à l'application native de BBC News; un ScrollView vertical, dans lequel se trouvent de nombreux ScrollViews horizontaux. Je travaille tous les deux dans la mesure où tout est rendu et les scrollers horizontaux fonctionnent parfaitement. Mon problème est que l'événement de défilement vertical ne se déclenchera pas si l'utilisateur balaie une surface dans un ScrollView horizontal. Si je touche une zone à l'extérieur des défileurs horizontaux, le défilement vertical fera son travail et défilera ... verticalement

Est-ce que quelqu'un sait ce que je manque? J'ai le sentiment qu'un RenderNode peut être nécessaire, mais je n'ai pas eu de chance jusqu'à maintenant. Je commence juste à comprendre Famous. Ce que j'ai vu jusqu'à présent est incroyable, mais ne pas être en mesure de comprendre cela commence vraiment à moi ...

Uber merci à l'avance si quelqu'un peut aider ...

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

Je vois vous l'avez compris, mais je pensais que je posterais un exemple de travail propre pour quelqu'un qui avait besoin d'un point de départ .. Alors voilà

Pour répondre à la question, oui, vous avez besoin de canaliser vos événements des surfaces à chacune des scrollviews

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

Le FlexScrollView célèbre-flex prend en charge vertical & restrictions de défilement horizontal lors de l'incorporation d'un scrollview dans un autre. Il est décrit plus en détail au bas du tutoriel FlexScrollView:

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