微信中iscroll5下拉刷新的应用

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在微信中做一个应用,要用到滚动刷新功能,先找了个iscroll4,配合一个辅助类用的还不错,但是在android下面很卡,于是换iscroll5,结果各种坑啊,上网搜索了一下,发现这位仁兄的文章http://blog.csdn.net/cdnight/article/details/44963063,运行了一下能跑起来,但还是有问题,我总结了一下,把一些经验和大家分享一下:</span>

1.在手机微信中click事件无效

       这是由于iscroll5屏蔽了事件冒泡,如果简单的的允许事件冒泡,那么在微信中下拉就会出现微信自带下拉效果,你的自定义事件就失效了,正确方法是在option里面设置

preventDefaultException: { tagName: /^(P|B|H1|H2|DIV|A|INPUT|TEXTAREA|BUTTON|SELECT)$/ }

,这P|B|H1|H2|DIV|A就是我加的,试一试,ok!

2.下拉后没有loading效果

      我没找到文档如何设置这个,直接修改的源码,找到resetPosition函数加上一段

 

		if ( !this.hasVerticalScroll || this.y >= 60 ) {
			y = 60;
		} else if (this.y>0 && this.y < 60) {
		    y = 0;
		}
这样下拉回弹到60的时候,就可以出现loading了,当然还要写辅助代码

 myScroll.on("slideDown", function () {
            if (this.y > 60) {
                downIcon.addClass("loading");
                setTimeout(function () {
                    if (_slidedownEvent != null) {
                        _slidedownNotOver = true;
                        _slidedownEvent();
                    }
                    else {
                        _slidedownNotOver = false;
                        myScroll.scrollTo(0, 0, 200, IScroll.utils.ease.bounceEasing);
                        downIcon.removeClass("loading");
                        $("#scroller-pullUp").hide();
                    }
                }, 1000);

            }
        });
判断在60的时候出现loading图标,然后异步执行_slidedownEvent事件,做一些ajax获取数据的操作,然后再异步回来设置
 myScroll.scrollTo(0, 0, 200, IScroll.utils.ease.bounceEasing);

滚动复原,这样就ok了

3.数据太少没有滚动条的时候自动隐藏提示图片

这个需要修改momentum函数,加入一个判断即可

if (lowerMargin<0 && destination < lowerMargin ) 

最后我封装了一下这个js,使其具备ajax数据拉取的能力,js代码如下:

                JmobileExt.Listview.initializtion("activelist.ashx", null, "#activities", "#listviewdot");

初始化Listview控件,"activelist.ashx"是获取数据的url地址,null是data,post的时候用的,"#activities"是listview控件id, "#listviewdot"是dot模板

               JmobileExt.Listview.GetFirstListData();

获取第一页json数据

                JmobileExt.Listview.bindEvent(null,null,null,
                   function (sender) {
                       var data=sender.Data;
<span style="white-space:pre">			</span>sender.Cancel=true;
                   }
               );

JmobileExt.Listview.bindEvent绑定四个事件post前下拉,post前上拉,post后下拉,post后上拉,sender.Data在post前可以组织post数据,在post后可以获取服务器返回的json数据,如果设置sender.Cancel=true,那么就不会提交和显示。


我把代码整理了一下,点击打开链接 ,项目是用jmobile和dot模板开放的,必须运行在web服务器环境中,直接在文件浏览器中打开是没有效果的。


微信中iscroll5下拉刷新的应用

上一篇:Android实际开发问题09_微信的授权登录


下一篇:如何在微信公众号下载保存图片??