Sencha Touch 用scroller实现滚到底部加载更多

Sencha Touch 用scroller实现滚到底部加载更多

2011-09-27 16:43 by 威老, 1812 阅读, 8 评论, 收藏, 编辑

需求：

当list滚动到末尾的时候，自动加载更多的内容。

闲言碎语：

其实这个问题要解决非常简单。但首先，我相信，大家不是为了简单的copy那几行代码而来的。相信看了详细的解说，大家能够真正有所收获，能够举一反三。毕竟sencha touch的中文资料不多，很多问题，都是找不到现成的解决方案的，这就需要我们自己动手去解决啦。

分析：

要搞定这个问题，首先要知道跟滚动相关的一些东西。

请大家打开api文档，跟我一起来吧！不清楚文档使用方法的请看Sencha Touch 快速入门2.0 第四章 Api文档看懂了吗？

首先，让我们认识一下ST框架里的scroller对象。

• scroller对象

scroller在sencha touch里扮演着十分重要的角色。所有的滚动相关功能的实现，都跟它脱不了干系。

不知道大家是否有发现，sencha touch里有许多对象都有一个scroller的配置项?

 

这个配置项，就是用来为当前对象创建一个Scroller的。以Panel为例，Sencah Touch框架在构造Panel的时候，判断scroll配置项，然后根据配置项的值new出相应的scroller，并将其赋给panel。这样一来Panel就能实现了滚动功能了！

我们可以用这样的写法：panel.scroller。来获取panel的scroller对象，用它来实现各种功能。

 对于scroller比较重要的一些东西，

这是console.log(scroller)出来的东西。不清楚的同学可以看看Sencha Touch 快速入门2.0 第二章 Chorme浏览器调试功能介绍

offset是当前滚动条位置。

offsetBoundary表示滚动条的边界。

也就是说，我们只需要在滚动结束时，比较这两个值就行了。那么现在还缺什么？一个事件！Ok，让我们看看滚动结束事件：

 到这里，怎么实现，大家肯定比我还清楚了，5行代码搞定。 

list.scroller.on('scrollend',function(scroller,offset){
    if(Math.abs(scroller.offset.y) > Math.abs(scroller.offsetBoundary.top) - 50){
        //这里添加数据
    }
});

• store添加数据的方法

额。。。真的吗？好像漏了点东西。怎么添加数据呢？

恩，在这里呢。有两个呢。

可以看到，第一个参数是要添加的数据，而第二个是读取方式，决定是添加还是覆盖。

因为我要用写死的数据作示范，所以这里我用第一个来实现添加数据，大家根据格子实际获取的数据类型来作决定。

于是最终代码

list.scroller.on('scrollend',function(scroller,offset){
    if(Math.abs(scroller.offset.y) > Math.abs(scroller.offsetBoundary.top) - 50){
        list.store.loadData([
            {firstName: 'Ape', lastName: 'Evilias'},
            {firstName: 'Dave', lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jay', lastName: 'Robinson'},
            {firstName: 'Tommy', lastName: 'Maintz'},
            {firstName: 'Ed', lastName: 'Spencer'},
            {firstName: 'Jamie', lastName: 'Avins'}
        ], true);
    }
});

很简单吧。

解决方案：

接下来就是全部代码了，大家可以自己拿去运行一下。

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady : function() {
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });

        var groupingBase = {
            itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
            selModel: {
                mode: 'SINGLE',
                allowDeselect: true
            },

            onItemDisclosure: {
                scope: 'test',
                handler: function(record, btn, index) {
                    alert('Disclose more info for ' + record.get('firstName'));
                }
            },

            store: new Ext.data.Store({
                model: 'Contact',

                getGroupString : function(record) {
                    return record.get('firstName')[0];
                },

                data: [
                    {firstName: 'Tommy', lastName: 'Maintz'},
                    {firstName: 'Ed', lastName: 'Spencer'},
                    {firstName: 'Jamie', lastName: 'Avins'},
                    {firstName: 'Aaron', lastName: 'Conran'},
                    {firstName: 'Dave', lastName: 'Kaneda'},
                    {firstName: 'Michael', lastName: 'Mullany'},
                    {firstName: 'Abraham', lastName: 'Elias'},
                    {firstName: 'Jay', lastName: 'Robinson'},
                    {firstName: 'Tommy', lastName: 'Maintz'},
                    {firstName: 'Ed', lastName: 'Spencer'},
                    {firstName: 'Jamie', lastName: 'Avins'},
                    {firstName: 'Aaron', lastName: 'Conran'},
                    {firstName: 'Ape', lastName: 'Evilias'},
                    {firstName: 'Dave', lastName: 'Kaneda'},
                    {firstName: 'Michael', lastName: 'Mullany'},
                    {firstName: 'Abraham', lastName: 'Elias'},
                    {firstName: 'Jay', lastName: 'Robinson'}
                ]
            })
        };
    
        var list = new Ext.List(Ext.apply(groupingBase, {
                fullscreen: true
            }));
        
list.scroller.on('scrollend',function(scroller,offset){
    if(Math.abs(scroller.offset.y) > Math.abs(scroller.offsetBoundary.top) - 50){
        list.store.loadData([
            {firstName: 'Ape', lastName: 'Evilias'},
            {firstName: 'Dave', lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jay', lastName: 'Robinson'},
            {firstName: 'Tommy', lastName: 'Maintz'},
            {firstName: 'Ed', lastName: 'Spencer'},
            {firstName: 'Jamie', lastName: 'Avins'}
        ], true);
    }
});
    }
});

转载请注明原文地址
作者： 威老
博客地址： http://www.cnblogs.com/weilao
更多ST相关文章： Sencha Touch 文章导航贴

分类:  sencha touch