Famo.us 在滚动视图上滑动答案

【问题标题】：Famo.us swipe on scrollviewFamo.us 在滚动视图上滑动
【发布时间】：2014-08-29 20:40:05
【问题描述】：

我已经阅读了 Famo.us 大学的 Timbre 教程，它工作正常，但是当我向 layout.content 添加滚动视图时，滑动功能停止工作，滚动视图工作正常，但滑动却不行。

有人知道如何将 Trimbe 教程中的向右滑动功能与滚动视图结合使用吗？

///AppView///

function _handleSwipe() {
  var sync = new GenericSync(
    ['mouse', 'touch'],
    {direction : GenericSync.DIRECTION_X}
  );

  this.pageView.pipe(sync);

  sync.on('update', function(data) {
    var currentPosition = this.pageViewPos.get();
    if(currentPosition === 0 && data.velocity > 0) {
      this.menuView.animateStrips();
    }

    this.pageViewPos.set(Math.max(0, currentPosition + data.delta));
  }.bind(this));

  sync.on('end', (function(data) {
    var velocity = data.velocity;
    var position = this.pageViewPos.get();

    if(this.pageViewPos.get() > this.options.posThreshold) {
      if(velocity < -this.options.velThreshold) {
        this.slideLeft();
      } else {
        this.slideRight();
      }
    } else {
      if(velocity > this.options.velThreshold) {
        this.slideRight();
      } else {
        this.slideLeft();
      }
    }
  }).bind(this));
}

///PageView///

function _createBody() {

  var surfaces = [];
  this.scrollview = new Scrollview();

  var temp;
  for (var i = 0; i < 20; i++) {
    temp = new Surface({
      size: [undefined, 80],
      content: 'I am surface: ' + (i + 1),
      properties: {
        textAlign: 'left',
        lineHeight: '80px',
        borderTop: '1px solid #f1f1f1',
        borderBottom: '1px solid #fff',
        backgroundColor: '#f9f9f9',
        fontFamily: 'Arial',
        backfaceVisibility: 'visible',
        paddingLeft: '10px'
      }
    });

    temp.pipe(this.scrollview);
    surfaces.push(temp);
  }

  this.scrollview.sequenceFrom(surfaces);

  this.bodyContent = new Surface({
    size: [undefined, undefined],
    properties: {
      backgroundColor: '#f5f5f5'
    }
  });


  //this.layout.content.add(this.bodyContent);
  this.layoutContainer.add(this.scrollview);
}

function _setListeners() {
  this.hamburgerSurface.on('click', function() {
    this._eventOutput.emit('menuToggle');
  }.bind(this));

  //this.bodyContent.pipe(this._eventOutput);
  this.scrollview.pipe(this._eventOutput);
}

【问题讨论】：

标签： scrollview famo.us

【解决方案1】：

我已经自己弄清楚是否将管道（this._eventOutPut）放入 for each 中，并使用它工作的临时变量。我不知道是否是最好的解决方案，所以如果有人能提供更好的示例，我会很高兴。

for (var i = 0; i < 10; i++) {
  temp = new Surface({
    size: [undefined, 80],
    content: 'I am surface: ' + (i + 1),
    properties: {
      textAlign: 'left',
      lineHeight: '80px',
      borderTop: '1px solid #f1f1f1',
      backgroundColor: '#f9f9f9',
      fontFamily: 'Arial',
      backfaceVisibility: 'visible',
      paddingLeft: '10px'
    }
  });
/// Add the ._eventOutput to the temp
  temp.pipe(this._eventOutput);
  temp.pipe(scrollview);
  surfaces.push(temp);
}

【讨论】：

管道到另一个“小部件”将使 eventOutput 触发“小部件”之一的 eventInput。要将子元素的事件转发给它的父元素，您需要通过管道传输到该元素的 eventOutput。以这种方式，响应“.on”函数的父级将能够捕获它们。请记住，“widget”上的“.on”函数实际上是在监听它的 eventOutput 处理程序。见my post here for more details
感谢@FlavienVolken

【解决方案2】：

您确实应该将滚动视图处理的事件传递给您自己的同步。我创建了一个 SwipeSync 来简化此操作：http://famousco.de/2014/08/swipesync-famo-us/

var scrollview = {your scrollview};
var sync = new SwipeSync();
scrollview.pipe(sync);
sync.on('swipe', function(data) {
        alert('Swiped to: ' + data.direction);
});

【讨论】：