移动端下拉刷新

做了一个小的demo,移动端下拉刷新页面数据。没用插件。主要实现思路。大致说一下:
1.首先进入页面要进行ajax请求数据。
2.监视页面产生下拉动作,再次请求数据。
3.奏是这么简单粗暴。
4.上代码:

第一步:
$.ajax({
            url: basePath + '你自己的url', 
            type: 'get',
            async: true,
            cache: false,
            dataType: 'json',
            data:{curpage:curpage,rows:rows},
            success: function(jsondata) {
                if(jsondata.code==1){
                var investStatus="";
                totalCount= jsondata.obj.totalCount;
                var dataList=jsondata.obj.data;
                for(var i=0;i<dataList.length;i++){
                    if(dataList[i].status==2){
                        investStatus="立即投资";
                    }else{
                        investStatus="已抢光";

                    }
                    var html='<li data-id="'+dataList[i].id+'" data-status="'+dataList[i].status+'"><span><input name="'+dataList[i].id+'" type="checkbox" data-status="'+dataList[i].status+'"/></span><span>'+dataList[i].amount+'</span><span>'+isDayOrMonth(dataList[i].isDayLoan,dataList[i].periods)+'</span><span>'+dataList[i].process+'</span><span>'+investStatus+'</span></li>';
                    $("#mainList").append(html);

                }


              }
            }
        });
第二步:
//下拉刷新
    $(window).scroll(function(){
        console.log("下拉刷新");
        var scrollTop = $(this).scrollTop();   
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
            if (curpage * rows < totalCount) {
                getData(++curpage);
            };
        }
    });

效果就是这样的
发现一个问题就是,我是整理近期问题才会来csdn更新博客,所以导致好多小伙伴私信我的问题,我都是过了好久才看到,
有不明白的地方,可以微博找我。
微博:璐飞童鞋。关注之后,私信即可。

发布了41 篇原创文章 · 获赞 24 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览