Question

我正在尝试使用famo.us中的scrollview来实现典型的向左滑动事件以触发一些自定义操作。问题是我遗漏了一些东西而我无法完成它。我设法在每个scrollview项中实现一个Draggable修改器，因此可以拖动项目（X轴），但现在我无法捕获draggable修改器的事件以触发操作。

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

提前致谢。 =）

Answer 1

看起来你想要使用＆＃39; start＆＃39;可拖动修改器的事件..

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

Draggable也会发布＆＃39;更新＆＃39;并且＆＃39;结束＆＃39;并且这些处理程序中的每一个都使用一个返回可拖动位置的参数

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

希望这有帮助！

如何在ScrollView Famous中实现滑动操作

1 个答案: