歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> Sencha Touch高性能list最簡單高效的實現方案

Sencha Touch高性能list最簡單高效的實現方案

日期:2017/3/1 9:52:34   编辑:Linux編程

Sencha Touch 的list性能非常的低,官方論壇有人說超過200個項就已經是超標了!但事實上超過40個項就非常卡了,尤其是每個項裡還有圖片的時候,在iPhone中可能效果不錯,但到了Android,你可能會摔手機。

不順暢的原因其實是元素太多,必需限制顯示的數據,但又要解決上滾和下滾顯示相應的項,有人會想到用分頁,其實分頁相當的麻煩,下面就說一個鄙人奮戰了一天摸索出來的方法,僅僅三步,幾行代碼,你看了也會會心一笑。

1. me.pageNum = 1;//當前頁
me.pageItems = Ext.is.Phone?15:25;//每頁顯示項
me.list.scroller.on('scrollend',me.onScrollerEnd,me);//監聽滾動停止事件

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){//滾動到頂部時顯示上一頁
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 ();
}
}
},

3.
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

Sencha Touch 的詳細介紹:請點這裡
Sencha Touch 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved