mui下拉刷新实现之总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CoderBruis/article/details/80593003

最近,在做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来下拉刷新出商品信息了。



没有更多推荐了,返回首页