Sencha Touch高性能list最簡單高效的實(shí)現(xiàn)方案
作者：iunbug
Sencha Touch 的list,性能非常的低,官方論壇有人說超過200個(gè)項(xiàng)就已經(jīng)是超標(biāo)了!但事實(shí)上超過40個(gè)項(xiàng)就非常卡了,尤其是每個(gè)項(xiàng)里還有圖片的時(shí)候,在iPhone中可能效果不錯(cuò),但到了Android,你可能會(huì)摔手機(jī).
不順暢的原因其實(shí)是元素太多,必需限制顯示的數(shù)據(jù),但又要解決上滾和下滾顯示相應(yīng)的項(xiàng),有人會(huì)想到用分頁,其實(shí)分頁相當(dāng)?shù)穆闊?下面就說一個(gè)鄙人奮戰(zhàn)了一天摸索出來的方法,僅僅三步,幾行代碼,你看了也會(huì)會(huì)心一笑.
- 1. me.pageNum = 1;//當(dāng)前頁
- me.pageItems = Ext.is.Phone?15:25;//每頁顯示項(xiàng)
- me.list.scroller.on('scrollend',me.onScrollerEnd,me);//監(jiān)聽滾動(dòng)停止事件
- 2. 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){//滾動(dòng)到頂部時(shí)顯示上一頁
- if((me.pageNum>1)){
- me.pageNum--;
- me.doPaging ();
- }
- }else if((y+h)>=lh){//滾動(dòng)顯底部時(shí)顯示下一頁
- var c = me.listStore.getCount();
- if(c > (me.pageNum*me.pageItems)){
- me.pageNum++;
- me.doPaging ();
- }
- }
- },
- 3.
- doPaging : function(){//分頁邏輯
- var me = this,
- n = me.pageNum,
- y = me.pageItems;
- me.helpStore.removeAll();//清除所有數(shù)據(jù)
- me.helpStore.add(me.listStore.getRange((n-1)*y, (n*y)));//取主store里的范圍
- me.list.bindStore(me.helpStore);//綁定到當(dāng)前l(fā)ist里
- me.list.scroller.scrollTo({x: 0, y:0}, false);//滾動(dòng)到頂部
- },//end function doPaging
責(zé)任編輯：佚名
來源：
iunbug
