Sencha Touch高性能list最简单高效的实现方案-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_14108/article/details/82487987

本文介绍了一个简单的分页加载实现方案，通过监听滚动结束事件来自动加载更多数据，仅需几行代码即可实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不顺畅的原因其实是元素太多,必需限制显示的数据,但又要解决上滚和下滚显示相应的项,有人会想到用分页,其实分页相当的麻烦,下面就说一个鄙人奋战了一天摸索出来的方法,仅仅三步,几行代码,你看了也会会心一笑.

me.pageNum = 1;//当前页         
me.pageItems = Ext.is.Phone?15:25;//每页显示项         me.list.scroller.on('scrollend',me.onScrollerEnd,me);//监听滚动停止事件

onScrollerEnd : function(scroller,offsets){//分页逻辑          
var me = this,              
lh = scroller.size.height,              
h  = me.list.getHeight(),              
y  = offsets.y;          
if(me.filterValue && me.filterValue!=''){return;}          
if(y==0){//滚动到顶部时显示上一页             
 if((me.pageNum>1)){                  
me.pageNum--;                  
me.doPaging ();             
 }         
 }else if((y+h)>=lh){//滚动显底部时显示下一页             
 var c = me.listStore.getCount();              
if(c > (me.pageNum*me.pageItems)){                  me.pageNum++;                  
me.doPaging ();              
}          
}     
 },

doPaging : function(){//分页逻辑         
var me = this,          
n = me.pageNum,          
y = me.pageItems;         
 me.helpStore.removeAll();//清除所有数据          
me.helpStore.add(me.listStore.getRange((n-1)*y, (n*y)));//取主store里的范围             
me.list.bindStore(me.helpStore);//绑定到当前list里
 me.list.scroller.scrollTo({x: 0, y:0}, false);//滚动到顶部      
},//end function doPaging