extjs - 如何获取 Sencha Touch 列表视图的“底部滚动”和“顶部滚动”？

Question

我想lazy loading为列表视图编写代码，以便我需要为我的控制器添加在用户向下滚动到列表底部和向上滚动到列表顶部时触发的操作。

如何使用 Sencha Architect 做到这一点？

Answer 1

我不使用 Architect，但您需要的是在控制器中获取列表的引用，并在列表scroll事件中为滚动对象的事件附加一个处理程序initialize：

控制器

config: {
    refs: {
        list: '...',
        ...
    },
    control: {
        list: {
            initialize: 'onListInit'
        },
        ...
    },
    ...
},
onListInit: function() {
    var scroller = this.getScrollable().getScroller();
    scroller.on('scrollstart', this.onNnListScrollStart, this);
    scroller.on('scrollend',   this.onNnListScrollEnd,   this);
},
onNnListScrollStart: function(scroller, x, y) {
    console.log('START SCROLL');
},

onNnListScrollEnd: function(scroller, x, y) {
    console.log('scroll x:'+x);
    console.log('scroll y:'+y);

    var bottom = scroller.maxPosition.y;
    var top    = scroller.minPosition.y;

    var isScrollUp   = scroller.dragDirection.y === -1;
    var isScrollDown = scroller.dragDirection.y === 1;

    if (bottom === y && isScrollDown) {
        console.log('BOTTOM');    
    }

    if (top === y && isScrollUp) {
        console.log('TOP');
    }

    console.log('END SCROLL');
},
...

可以在此处下载实施本指南的 Sencha Architect 示例项目