2

我正在尝试使用 famo.us 中的滚动视图来实现典型的向左滑动事件以触发一些自定义操作。问题是我错过了一些东西，我无法完成它。我设法在每个滚动视图项目中实现一个 Draggable 修饰符，因此可以拖动项目（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;
});

现在包含我的 ListView 的 App 类：

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 中实现滑动手势，如果有人知道它会有所帮助。

提前致谢。=)

4

1 回答 1

4

看起来您想为可拖动修饰符使用“开始”事件。

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

Draggable 还发出 'update' 和 'end' 并且这些处理程序中的每一个都带有一个参数，该参数返回可拖动的位置

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

希望这可以帮助！

于 2014-05-01T14:48:38.890 回答