Sencha Touch高性能list最简单高效的实现方案

移动开发
Sencha Touch 的list,性能非常的低,官方论坛有人说超过200个项就已经是超标了!但事实上超过40个项就非常卡了,尤其是每个项里还有图片的时候,在iPhone中可能效果不错,但到了Android,你可能会摔手机.

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

  1. 1.  me.pageNum = 1;//当前页 
  2.         me.pageItems = Ext.is.Phone?15:25;//每页显示项 
  3.         me.list.scroller.on('scrollend',me.onScrollerEnd,me);//监听滚动停止事件 
  1. 2.  onScrollerEnd : function(scroller,offsets){//分页逻辑  
  2.         var me = this,  
  3.             lh = scroller.size.height,  
  4.             h  = me.list.getHeight(),  
  5.             y  = offsets.y;  
  6.         if(me.filterValue && me.filterValue!=''){return;}  
  7.         if(y==0){//滚动到顶部时显示上一页  
  8.             if((me.pageNum>1)){  
  9.                 me.pageNum--;  
  10.                 me.doPaging ();  
  11.             }  
  12.         }else if((y+h)>=lh){//滚动显底部时显示下一页  
  13.             var c = me.listStore.getCount();  
  14.             if(c > (me.pageNum*me.pageItems)){  
  15.                 me.pageNum++;  
  16.                 me.doPaging ();  
  17.             }  
  18.         }  
  19.     },  

 

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

 

责任编辑:佚名 来源: iunbug
相关推荐

2011-07-26 09:46:53

Sencha Touc

2011-09-05 12:43:23

Sencha Touc事件

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2011-09-02 15:18:49

Sencha Touc

2011-09-05 13:53:08

Sencha Touc列表

2011-09-05 12:49:59

Sencha Touc事件

2010-11-22 10:31:17

Sencha touc

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-09-05 13:48:36

Sencha Touc图标

2011-07-25 16:41:16

Sencha Touc

2011-09-05 10:20:21

Sencha ToucAPP

2011-07-25 16:21:22

Sencha touc

2011-09-02 16:21:08

Sencha Touc自动生成工具

2011-09-05 10:39:03

Sencha Touc离线存储数据库

2011-11-28 13:42:55

Sencha Touc组件选择器

2011-09-30 14:15:10

Sencha ToucSencha Touc

2011-09-05 14:09:06

Sencha Touc函数

2011-09-02 15:12:29

PhoneGapSencha Touc

2012-03-08 22:31:28

Sencha Touc

2011-09-05 11:23:26

EclipseSencha Touc框架
点赞
收藏

51CTO技术栈公众号