关于在jquery中使用iscorll实现上拉下拉加载刷新的方法

最新推荐文章于 2023-08-18 14:15:59 发布

飞奔的猫

最新推荐文章于 2023-08-18 14:15:59 发布

阅读量953

点赞数

分类专栏： jquery 文章标签： iscroll 下拉刷新下拉加载 jquery

本文链接：https://blog.csdn.net/jylonger/article/details/50053391

版权

jquery 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

实现原理是:判断fiiptop,flipdown是否显示为依据

myScroll = new iScroll('wraphome', {
                fixedScrollbar: true,
                hideScrollbar: true,
                fadeScrollbar: true,
                hScrollbar: false,
                vScrollbar: true,
                onScrollMove: function () {
                    var topstat = $(".fliptop").is(":visible");
                    var downstat = $(".flipdown").is(":visible");
                    if (this.y > 15 && !topstat && !downstat) {
                        $(".fliptop").fadeIn(300);
                    } else if (this.y < 15 && topstat) {
                        $(".fliptop").hide();
                    } else if (this.y < (this.maxScrollY - 25) && !topstat && !downstat) {
                        $(".flipdown").fadeIn(300);
                        this.refresh();  //这里是当显示正在加载中时刷新底部位置
                    } else if (this.y > (this.maxScrollY + 25) && downstat) {
                        $(".flipdown").hide();
                    }
                },
                onTouchEnd: function () {
                    var topstat = $(".fliptop").is(":visible");
                    var downstat = $(".flipdown").is(":visible");
                    if (topstat && !downstat) {
                        $(".fliptop").html("正在加载中……");
                        setTimeout(function(){
                            //此处为你自己的逻辑方法
                        },3000);
                    } else if (downstat && !topstat) {
                        $(".flipdown").html("正在加载中……");
                        setTimeout(function(){
                            //此处为你自己的逻辑方法
                        },3000);
                    }

                }
            });

页面部分

<div id="wraphome" class="scroll">
     <div class="scroll-inner">
          <div class="fliptop">松手开始加载...</div>
          <div class="list">
               .............
          </div>
          <div class="flipdown">松手开始加载...</div>
     </div>
</div>