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

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

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

 

一个滚屏的分页写法

 

页面结构

     
	
      
       近期投诉举报问题
      
    
      
    
      
       
      
    
      
       没有更多内容啦~~
      
    
      
       服务器离家出走了
      
    
      
       
      
     

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
     
      ’)                        }                    }                }else{
                        //当数据返回出现问题时候出现的message信息                    $('.mask').html(data.message).fadeIn(300)                }            },            error:function(data){
                    ajax请求不成功                $('.mask').fadeIn(300);                setTimeout(function(){                    $('.mask').fadeOut(300)                },2000)            }        })
     

　

效果图