您的位置:首页 > 其它

sencha-touch2 PullRefresh插件的bug和修复方法

2012-11-28 14:04 585 查看
sencha touch2.0.1.1中自带的PullRefresh插件有一个很奇怪的地方,可以算是bug:
就是实际加载数据是在loading文案消失之后才开始的,很不合常理,一般都是加载玩数据后才隐藏loading文案。
那么为什么会这样?查了下PullRefresh.js代码,发现原因在这里:
293         Ext.defer(function() {                                                       
294             scroller.on({                                                            
295                 scrollend: function() {                                              
296                     if (me.getRefreshFn()) {                                         
297                         me.getRefreshFn().call(me, me);                              
298                     } else {                                                         
299                         me.fetchLatest();                                            
300                     }                                                                
301                     me.resetRefreshState();                                          
302                 },                                                                   
303                 delay: 100,                                                          
304                 single: true,                                                        
305                 scope: me                                                            
306             });                                                                      
307             scroller.minPosition.y = 0;                                              
308             scroller.scrollTo(null, 0, true);                                        
309         }, 500, me);
上面是loadStore中的一段代码,其中307,308行代码就是隐藏loading文案并恢复滚动条位置,可以看到这里根本没有任何加载完数据之后的回调逻辑,也就是说它本来的设计就是loading文案跟数据的加载没有关系,可以说是非常不合常理的。
那么想改成在加载玩数据后再隐藏loading就应该这么办:
首先把上面的代码改掉,删掉隐藏loading文案的代码,只留下面几行:
296         if (me.getRefreshFn()) {                                         
297                         me.getRefreshFn().call(me, me);                              
298                     } else {                                                         
299                         me.fetchLatest();                                            
300                     }                                                                
301                     me.resetRefreshState();
这样在加载之后就需要恢复滚动条的位置并隐藏文案,也就是要把这两行代码放到fetchLatest函数的末尾去:
scroller.minPosition.y = 0;                                              
scroller.scrollTo(null, 0, true); 
如果你是自定义的refreshFn怎么办?
就只能手动实现了,在refreshFn中增加如下代码,加载完数据后恢复滚动条即可,和fetchLatest是一样的道理,注意只监听一次即可:

 29                     store.on({

 30                         single: true,

 31                         load: function(){

 32                             var list = Ext.getCmp("answerlist");

 33                             scroller = list.getScrollable().getScroller(),

 34                             scroller.minPosition.y = 0;

 35                             scroller.scrollTo(null, 0, true);

 36                         }

 37                     });

到此,PullRefresh插件的bug就修好了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐