mui下拉刷新实现之总结

最近，在做wap端系统时，需要下拉刷新出商品信息，这里就要用到了mui框架的下拉组件。好歹也是研究了一天，才把下拉刷新商品信息写出来，因此写篇博客总结一下。下面上代码：

第一步，引入mui：

<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js "></script>

第二步，引入mui和业务代码：

在下拉的时候，在之前都是只刷新一次，之后就没有刷新了。后来，在找了很多解决方案后，发现了一个可行、简单的方法来解决。就是能够持续的下拉刷新，从后台访问数据库，显示到前端页面。

核心的解决代码：

function pullupRefresh() {
	etTimeout(function() {
	mui('#refreshContainer').pullRefresh().endPullupToRefresh((++page > pages)); 
	loaddata(page);// 加载当前页的数据 
	}, 1500);
}

下面展示完整的JSP代码：

<script type="text/javascript">
mui.init({
	swipeBack: true, //启用右滑关闭功能
	pullRefresh: {
		container: '#refreshContainer',
		up: {
			heigh    t: "50",
			contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
			contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
			callback: pullupRefresh
		    }
		}
	});
function loaddata(page) {
		$.ajax({
			url:"refresh-recommend-goods.html",
			type:"get",
			data:{"cp":page,"ps":pageSize},
			success:function(result){
				//加载商品
				function freshGoods() {				
				}
			},
			error:function(){
				alert("error");
			}
		}); 
	}
			
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
	etTimeout(function() {
	mui('#refreshContainer').pullRefresh().endPullupToRefresh((++page > pages)); 
	loaddata(page);// 加载当前页的数据 
	}, 1500);
}
//加载商品
function freshGoods() {				
}                                 </script>

第三步，后台springmvc代码处理前端传入的cp，pageSize，然后分页查询商品信息：

//下拉刷新
@ResponseBody
@RequestMapping(value="/page/refresh-recommend-goods.html")
public String recommend_goods(int cp, int ps) {
	int currentPage = cp;
	int pageSize = ps;
	int start = (currentPage-1)*pageSize;
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("currentPage", start);
	map.put("pageSize", pageSize);
	List<Goods> list = goodService.listByRecommend2(map);//分页查询商品信息
	Iterator<Goods> it = list.iterator();
	while(it.hasNext()) {
		System.out.println(it.next().getGoods_name());
	}
	JSONObject json = new JSONObject();
	if(list != null && list.size() > 0) {
		json.put("code", 100);
		json.put("list", list);
		json.put("currentPage",currentPage);
		json.put("pageSize",pageSize);
	} else {
		json.put("code", 200);
	}
	return json.toString();
}

这样，就能mui和ajax来下拉刷新出商品信息了。