Famo.us 在滚动视图上滑动

问题描述

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

I have go through the Timbre tutorial in Famo.us University and it works fine but when I add a scrollview to the layout.content the swipe function stop working the scrollview view works fine but not the swipe.

有人知道如何使用滚动视图应用 Trimbe 教程中的向右滑动功能吗?

Anyone know how to aplly the swipe right function from the Trimbe tutorial with a scrollview?

////AppView////

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

推荐答案

如果我将管道(this._eventOutPut) 放在 for each 中，并使用它可以工作的临时变量，我已经自己弄清楚了.我不知道这是否是最好的解决方案，所以如果有人能给出更好的例子，我会很高兴.

I have figured out by myself if I put the pipe(this._eventOutPut) in the for each with the temp variable it works. I don't know if is the best solution so I will be happy if anyone can give a better exemplo.

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

这篇关于Famo.us 在滚动视图上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！