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 += '<li>暂无数据</li>';
	            	  	}else{
	            	  		$.each(data.data.list,function(i,item){
								//console.log(item.id);
                                   html+='<li>';
                                   html+='<a  href="/wechat/item/product_info?productId='+item.id+'" class="item-tap">';
                                   html+='<div class="thumb">';
                                   html+='<div class="thumb-wrap">';
                                   html+='<img src="'+item.productImg+'"/>';
                                   html+='</div></div>';
                                   html+='<div class="brand-bar fix">';
                                   html+='<span class="brand">'+item.brand +'</span>';
                                   html+='</div><div class="detail-bar fix">';
                                   html+='<span class="detail">'+item.title+'</span>';
                                   html+='</div><div class="price-bar fix"><div class="fix">';
                                   html+='<span class="price-temai">¥'+item.sp+'</span>';
                                   html+='</div></div></li>';

                            });
	            	  	}
	                            
	                            $("#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<Map<String, Object>> dataList = new ArrayList<Map<String,Object>>();

			Map<String, Object> map =new HashMap<String, Object>();
			

			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<Item> itemList = this.itemService.getItemList(map, Integer.parseInt(pageIndex), Integer.parseInt(pageSize));
			if(itemList!=null&&itemList.size()>0){
				for (Item item : itemList) {
					map = new HashMap<String, Object>();
					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<String, Object>();
				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());
		}
	}

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

下载地址： http://download.csdn.net/detail/xb12369/9561182

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

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