上拉刷新效果 html5,Html5上拉刷新

效果图貌似不好截图额，直接下载下来看效果呗：

关键ajax部分的代码：

function ajaxRead(n){

var html="";

$.ajax({

type:'get',

dataType:'json',

url:'/wechat/item/ajaxAppItem',//这里换成自己的数据来源

beforeSend:function(){

document .getElementById("ld").style.display="block";

console.log('loading...')

},

success:function(data){

if(data.state == 0){

html += '

暂无数据';

}else{

$.each(data.data.list,function(i,item){

//console.log(item.id);

html+='

';

html+='';

html+='

';

html+='

';

html+='';

html+='

';

html+='

';

html+=''+item.brand +'';

html+='

';

html+=''+item.title+'';

html+='

';

html+='¥'+item.sp+'';

html+='

';

});

}

$("#mainlist").append($(html));

},

complete:function(){

document.getElementById("ld").style.display="none";

//appList.G.getInstance();

console.log('mission acomplete.'

)}

});

}

后台数据来源格式：

@RequestMapping(value="ajaxAppItem")

public void ajaxAppItem(HttpServletRequest request,HttpServletResponse response){

JSONObject jsonObject = new JSONObject();

try{

response.setContentType("text/html;charset=utf-8");

PrintWriter writer = response.getWriter();

//最终的集合

List> dataList = new ArrayList>();

Map map =new HashMap();

String pageIndex = request.getParameter("page");//ajax传的分页数

if(!(!StringUtils.isEmpty(pageIndex)&&CommonUtils.isNumber(pageIndex))){

pageIndex = "1";

}

String pageSize = request.getParameter("pageSize") == null ? "8" : request.getParameter("pageSize");//每页显示

//获取商品

long count = this.itemService.getItemCount(map);

List itemList = this.itemService.getItemList(map, Integer.parseInt(pageIndex), Integer.parseInt(pageSize));

if(itemList!=null&&itemList.size()>0){

for (Item item : itemList) {

map = new HashMap();

map.put("id", item.getId());

map.put("productImg",item.getImgs().size()>0 ? Global.getServerUrl()+CommonUtils.getSmallPhotopath(item.getImgs().get(0),1) : "");

map.put("brand", item.getBtitle()=="" ? item.getTitle() : item.getBtitle());

map.put("title", item.getTitle());

if(!StringUtils.isEmpty(item.getH5BsnnerId())){

map.put("sp", item.getFp());

}else{

map.put("sp", item.getSp());

}

map.put("marketPrice", item.getMp());//市场价

dataList.add(map);

}

map = new HashMap();

long page = 0;//最大页数

if(count%8 == 0){

page = count/8;

}

if(count%8 > 0){

page = count/8+1;

}

if(page == Long.parseLong(pageIndex)){

map.put("isEnd", true);//是否是最后一页

}else{

map.put("isEnd", false);//是否是最后一页

}

map.put("list", dataList);

jsonObject.put("state", 1);

jsonObject.put("data", map);

jsonObject.put("msg", "");

}else{

map.put("list", dataList);

jsonObject.put("state", 0);

jsonObject.put("data", map);

jsonObject.put("msg", "暂无数据");

}

writer.write(jsonObject.toString());

if(writer!=null){

writer.close();

}

}catch(Exception ex){

ex.printStackTrace();

jsonObject.put("code", 1000);

jsonObject.put("msg", ex.getMessage());

}

}

我发现有了这个上拉加载的，基本上可以搞定很多相似的需求~~~~~~

ajax中的url切记换成自己的数据来源！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

---------------------------------------------------------------------------------end----------------------------------------------------------------------------------------