近期做了一个关于信息展示的详情页面，将里面能够提升用户体验的小点写出来
1.当页面请求新的数据，或上传数据的时候 放一个loading.gif的过渡，告诉用户 你的操作已经完成，正在加载中
2.当所有数据都加载完成时，显示一个提示，告诉用户你的信息已经全部显示
一个滚屏的分页写法
页面结构
<div class="wap" >
<div class="tit">近期投诉举报问题</div>
<ul></ul>
<div class="load"><img class="loading" src="data:images/loading.gif"></div>
<div class="notext">没有更多内容啦~~</div>
<div class="mask">服务器离家出走了</div>
<div class="img_mask"><img src="data: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)
}
})
效果图