jquery iscroll仿原生app下拉和上拉刷新

时间：2016-06-24 编辑：简简单单来源：一聚教程网

关于iscroll插件

iscroll插件（官网地址）当前最新的版本是version 5版本，相对于版本4，我个人觉得，版本5变得更具有灵活性，虽然移除了一些特定的事件，特定的对外接口，但是对于使用该插件的程序员们，这个插件变得更具有操控性，这是我比较喜欢的一种插件类型，但同时，也发现了一些问题，事件中的touchend事件，不存在了（确切的说，不能说是不存在），只是被拦截了，所以一些基本的事件，都被进行了拦截，而导致无法监听到touchend事件，只能检测到scrollEnd事件，scrollEnd事件，是在页面滚动停止时，才会被触发的，所以~~

所以，根据版本5，无法检测到，是不是下拉了一段距离之后，松开时的动作了，对此，我也检查了源代码，也没有发现这个功能的实现方法，不得已，只能对源代码进行了少量的修改，所以就有了本篇文章。

修改后插件的使用

基本上，该方法并没有进行多少的修改，只是添加了两个事件的监听类型，一个叫做“slideDown”，表示下拉被触发，另一个叫做“slideUp”，表示上拉被触发。

其他，实例化中，各属性都没有进行更改，所以，关于iscroll的使用，直接参考官网的说明：iscroll官网。

这里，我只对新添加的事件，添加一个demo测试，这个demo是一个很简单的demo，也只是用来说明新添加事件的用法的，如果需要用到下拉刷新或者上拉刷新的朋友，可以根据本demo自行修改。

html代码

代码如下

复制代码

下拉刷新

demo1

demo1

demo1

demo1

demo1

demo1

demo1

上拉刷新

js代码

代码如下

复制代码

$(function(){
    var myScroll,
        upIcon = $("#up-icon"),
        downIcon = $("#down-icon")
        target = $(".list"),
        temp = " ";

    myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });//probeType属性，表明此插件，可以监听scroll事件

    myScroll.on("scroll",function(){
        //scroll事件，可以用来控制上拉和下拉之后显示的模块中，
        //样式和内容展示的部分的改变。
        var y = this.y,
            maxY = this.maxScrollY - y,
            downHasClass = downIcon.hasClass("reverse_icon"),
            upHasClass = upIcon.hasClass("reverse_icon");

        if(y >= 40){
            !downHasClass && downIcon.addClass("reverse_icon");
            return "";
        }else if(y < 40 && y > 0){
            downHasClass && downIcon.removeClass("reverse_icon");
            return "";
        }

        if(maxY >= 40){
            !upHasClass && upIcon.addClass("reverse_icon");
            return "";
        }else if(maxY < 40 && maxY >=0){
            upHasClass && upIcon.removeClass("reverse_icon");
            return "";
        }
    });

    myScroll.on("slideDown",function(){
        //当下拉，使得边界超出时，如果手指从屏幕移开，则会触发该事件
        if(this.y > 40){
            //获取内容于屏幕拉开的距离
            //可以在该部分中，修改样式，并且仅限ajax或者其他的一些操作
            //此时只是为了能演示该功能，只添加了一个alert功能。
            //并且，由于alert会阻塞后续的动画效果，所以，
            //添加了后面的一行代码，移除之前添加上的一个样式
            //alert("slideDown");
            //upIcon.removeClass("reverse_icon")
            temp='

我是新加进来的

';
            target.before(temp);
            myScroll.refresh();
        }
    });

    myScroll.on("slideUp",function(){
        if(this.maxScrollY - this.y > 40){
            //与slideDown相同的，maxScrollY表示文档区域的最大高度
            //alert("slideUp");
            //upIcon.removeClass("reverse_icon")
            temp='

我是新加进来的

';
            target.append(temp);
            myScroll.refresh();
        }
    });
})

css代码我就不贴出来了，看demo里，很简单了。

最后，注意一点，当你使用ajax添加或者删除一些新的元素时，要重新myScroll.refresh()一下，会重新计算maxScrollY区域的，以保证区域覆盖的正确性，这些东西，如果你真的使用到，那么肯定可以碰到这些问题的，所以，这里是我话多了~~~

上一个： WordPress关闭自动更新版本升级功能提示教程
下一个： js实现json方式提交数据到服务端

推荐专题

最新下载

热门教程

jquery iscroll仿原生app下拉和上拉刷新

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程