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({
到此,PullRefresh插件的bug就修好了