如何在ScrollView中實現滑動動作着名

Question

我試圖實現典型的滑動左事件來觸發一些使用famo.us中的滾動視圖的自定義動作。事情是，我錯過了一些東西，我無法完成它。我設法在每個滾動視圖項目中實現可拖動的修改器，因此可以拖動項目（X軸），但現在我無法捕獲可拖動修改器的事件以觸發操作。

這裏是我的ListView類：

define(function(require, exports, module) { 
    // Imports 
    var View = require('famous/core/View'); 
    var Surface = require('famous/core/Surface'); 
    var Utility = require('famous/utilities/Utility'); 
    var ScrollView = require('famous/views/ScrollView'); 
    var ViewSequence = require('famous/core/ViewSequence'); 
    var Draggable = require('famous/modifiers/Draggable'); 
    var RenderNode = require('famous/core/RenderNode'); 
    var EventHandler = require('famous/core/EventHandler'); 

    function ListView() { 
     View.apply(this, arguments); 
     this.items = []; 

     this.scrollView = new ScrollView({ 
      direction: Utility.Direction.Y, 
      margin: 100000 
     }); 

     this.viewSequence = new ViewSequence(this.items); 
     this.scrollView.sequenceFrom(this.viewSequence); 

     this._add(this.scrollView); 
    }; 

    ListView.prototype = Object.create(View.prototype); 
    ListView.prototype.constructor = ListView; 

    ListView.prototype.setContent = function(data) { 
     for (var i = 0; i < data.length; i++) { 
      var item = new Surface({ 
       size: [undefined, 60], 
       content: 'Item ' + data[i], 
       classes: ['listview-item'] 
      }); 

      var draggable = new Draggable({ 
       xRange: [-100, 100], 
       yRange: [0, 0] 
      }); 

      var node = new RenderNode(draggable); 
      node.add(item); 

      draggable.on('click', function() { 
       console.log('emit swipe') 
       this._eventOutput.emit('swipe'); 
      }.bind(this)); // This Doesn't work 

      item.on('click', function() { 
       console.log('emit swipe') 
       this._eventOutput.emit('swipe'); 
      }.bind(this)); // Neither this 

      item.pipe(draggable); 
      item.pipe(this.scrollView); 
      this.items.push(node); 
     } 
    }; 


    module.exports = ListView; 
}); 

現在App類，我包括我的ListView：

define(function(require, exports, module) { 

    ... 

    // Custom Views 
    var ListView = require('views/ListView'); 


    function App() { 
     View.apply(this, arguments); 

     this.layout = new HeaderFooterLayout({ 
      headerSize: 70, 
     }); 

     ... 

     this.list = new ListView(); 
     this.list.pipe(this._eventInput); 
     this._eventInput.on('swipe', this.swipeListItem.bind(this)) // Trying to captute swipe event 

     this.list.setContent([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]); 

     this.layout.content.add(this.list); 

     .... 

     this._add(this.layout); 
    }; 

    App.prototype = Object.create(View.prototype); 
    App.prototype.constructor = App; 

    App.DEFAULT_OPTIONS = {}; 


    App.prototype.swipeListItem = function() { 
     console.log('Item Swiped!'); 
    }; 

    module.exports = App; 
}); 

我不知道我錯過了什麼或者是否有實現一個更好的辦法在famo.us中輕掃手勢，如果有人知道這件事會有所幫助。

在此先感謝。 =）

Answer 1

它看起來像你想使用「開始」事件可拖動修改..

draggable.on('start', function() { 
    console.log('emit drag start') 
    this._eventOutput.emit('swipe'); 
}.bind(this)); 

可拖動還發出「更新」和「結束」和每個處理器的帶一個參數返回可拖動的位置

draggable.on('update', function(e) { 
    // Do something on update 
    var pos = e.position; 

}); 

draggable.on('end', function(e) { 
    // Do something on end 
    var pos = e.position; 
}); 

希望這有助於！