Question

我已经浏览了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));
}

///网页浏览///

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

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

Answer 2

您确实应该将scrollview处理的事件转发给您自己的同步。我创建了一个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);
});

Famo.us在scrollview上滑动

2 个答案: