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就修好了
就是实际加载数据是在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就修好了
相关文章推荐
- sencha touch列表插件bug
- SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件 做的分页示例
- Sencha Touch 2 中 listpaging 与 pullrefresh 2个插件的使用(分页功能实现)
- htmlcomplet.vim 插件bug修复方法 line 304, E121: Undefined
- 修复 Sencha Touch / ExtJS 6 把 Android 8(Oreo) Chrome 识别为 Opera 的bug
- sencha touch 2.2 为list PullRefresh插件添加refreshFn方法
- Android添加phonegap--sencha touch2插件教程
- (转)jquery formValidator插件ajax验证,在内容不做修改的前提下提示错误的bug解决方法
- sencha touch list 选择插件,可记忆已选项,可分组全选
- [Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,执行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决的方法
- [Phonegap+Sencha Touch] 移动开发71 Sencha项目开发、调试方法建议
- 10个JavaScript常见BUG及修复方法
- Sencha Touch 2 Sass自定义图标的使用方法
- uploadify 插件使用 包含 增删,修改样式,类似邮箱里的 添加附件 功能,也修复了uploadify存在的bug
- sencha touch 简单的倒计时插件
- [Sencha ExtJS] ExtJS 6.2.1 Modern 的 List 下拉刷新(Pullrefresh)插件,官方已经修复
- [Phonegap+Sencha Touch] 移动开发76 让cordova app訪问远端站点也能调用cordova插件功能
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自动更新App的Web内容
- [Phonegap+Sencha Touch] 移动开发31 使phonegap的inappbrowser插件支持通过手机返回键进行历史记录后退
- element ui 表格动态列显示空白bug 修复方法