微信中iscroll5下拉刷新的应用

来源：互联网发布：江苏省建筑节能数据库编辑：程序博客网时间：2024/06/06 01:58

<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服务器环境中，直接在文件浏览器中打开是没有效果的。

0 0