手机端-ajax跨域请求滚屏分页

近期做了一个关于信息展示的详情页面，将里面能够提升用户体验的小点写出来

1.当页面请求新的数据，或上传数据的时候 放一个loading.gif的过渡，告诉用户 你的操作已经完成，正在加载中

2.当所有数据都加载完成时，显示一个提示，告诉用户你的信息已经全部显示

 

一个滚屏的分页写法

 

页面结构

<div class="wap" >
	<div class="tit">近期投诉举报问题</div>
    <ul></ul>
    <div class="load"><img class="loading" src="images/loading.gif"></div>
    <div class="notext">没有更多内容啦~~</div>
    <div class="mask">服务器离家出走了</div>
    <div class="img_mask"><img src="images/1.jpg"/></div>
</div>

var num_=1; 一开始是第一页 

  function refresh(refresh,loadmore) {
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
            var scrollHeight = $(document).height();   //当前页面的总高度
            var clientHeight = $(this).height();    //当前可视的页面高度
//           console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
            if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 分页数；、 
//              console.log('下拉');
                num_++; //这个是分页的页码 
                fn1(num_)//开始ajax请求多更数据
                //调用加载更多函数
                if(loadmore){ 
                    loadmore();
                }
            }else if(scrollTop<=0){ //滚动条距离顶部的高度小于等于0
                console.log('上拉');
                if(refresh){
　　　　　　　　　　　　　　　　//调用刷新函数 
                    refresh();
                }
            }
        });
    }

　

下面是一个ajax跨域请求的例子

   $.ajax({
            url:'url',
            type:'get',
            dataType:'jsonp',
            jsonp:'jsonpcallback',
            data:{
                'page':num_,
                'pageSize':6
            },
            beforeSend: function(){
　　　　　　　　　　请求完成前加载图标的显示，提示用户正在加载
                $('.load').show()
            },
            complete: function(){
　　　　　　　　　　完成请求时候，隐藏
                $('.load').hide()
            },
            success:function(data){
                if(data.success){
                    if(!data.result.length){
                        /*当数据全部加载完显示*/
                        $('.load').remove();
                        $('.notext').fadeIn(500);
                    }else{
                        console.log(data);
                        for(var i=0;i<data.result.length;i++){
                            $('ul').append('<li>’)
                        }
                    }
                }else{
                    //当数据返回出现问题时候出现的message信息
                    $('.mask').html(data.message).fadeIn(300)
                }
            },
            error:function(data){
                ajax请求不成功
                $('.mask').fadeIn(300);
                setTimeout(function(){
                    $('.mask').fadeOut(300)
                },2000)
            }
        })

　

效果图