mescrolljs每次下拉刷新后数据为何总是重复加载,无法到底部

ijack0903 2017-11-03 01:55:26
在项目开发中使用了mescrolljs插件来做上拉加载下拉刷新效果,但是每次下拉刷新的时候数据都会重复加载,永远也不会到底部,不知道是什么原因,特来求教。谢谢!





...全文
1003 4 点赞 打赏 收藏 举报
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
不进则退呢 2020-03-30
mybatis的配置项 pagehelper.reasonable = false
  • 打赏
  • 举报
回复

/* 联网加载列表数据 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
	function getListData(page) {

		// 联网加载数据
		getListDataFromNet(pdType, page.num, page.size, word, function(
				curPageData) {
			// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			// mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			// console.log("pdType="+pdType+", page.num="+page.num+",
			// page.size="+page.size+",
			// curPageData.length="+curPageData.length);

			// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
			// mescroll.endByPage(curPageData.length, totalPage);
			// //必传参数(当前页的数据个数, 总页数)

			// 方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			// mescroll.endBySize(curPageData.length, totalSize);
			// //必传参数(当前页的数据个数, 总数据量)

			// 方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			// mescroll.endSuccess(curPageData.length, hasNext);
			// //必传参数(当前页的数据个数, 是否有下一页true/false)

			// 方法四
			// (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
			mescroll.endSuccess();
			// 提示:curPageData.length必传的原因:
			// 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
			// 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
			// 3.使配置的noMoreSize生效

			// 设置列表数据
			setListData(curPageData);
		}, function() {
			// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
			mescroll.endErr();
		});
	}
function setListData(curPageData) {
//省略
}
function getListDataFromNet(pdType, pageNum, pageSize, word,
			successCallback, errorCallback) {

		$.ajax({
			type : 'post',
			url : xxxxxx?pdType=' + pdType + '&pageNum='
					+ pageNum + '&pageSize=' + pageSize + '&name=' + word,
			dataType : 'json',
			success : function(data) {
				var total = data.total;
				data = data.rows;
				var listData = [];

				//省略
				mescroll.endSuccess(data.length);
				mescroll.endBySize(data.length, total);
				mescroll.endByPage(data.length, pageNum);
				successCallback(listData);
				// 回调
			},
			error : errorCallback
		});

	}
/* 设置列表数据 */
	function setListData(curPageData, isAppend) {
		var listDom = document.getElementById("newsList");
		for (var i = 0; i < curPageData.length; i++) {
			var newObj = curPageData[i];
			var str = '<p>' + newObj.title + '</p >';
			str += '<p class="new-content">' + newObj.content + '</p >';
			var liDom = document.createElement("li");
			liDom.innerHTML = str;
			if (isAppend && curPageData.length == page.size) {
				listDom.appendChild(liDom);// 加在列表的后面,上拉加载
			} else {
				listDom.insertBefore(liDom, listDom.firstChild);// 加在列表的前面,下拉刷新
			}
			
		}
	}
var mescroll = new MeScroll("mescroll", {
		// 上拉加载的配置项
		up : {
			callback : getListData, // 上拉回调,此处可简写; 相当于 callback: function (page)
			isBounce : true, // 此处禁止ios回弹,解析(务必认真阅读,特别是最后一点):
			auto:true,				// http://www.mescroll.com/qa.html#q10
			noMoreSize : 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看;
							// 默认5
			empty : {
			// icon: "../res/img/mescroll-empty.png", //图标,默认null
			// tip: "暂无相关数据~", //提示
			/*
			 * btntext: "去逛逛 >", //按钮,默认""
			 *//*
				 * btnClick: function(){//点击按钮的回调,默认null
				 * alert("点击了按钮,具体逻辑自行实现"); }
				 */
			},
			htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
			clearEmptyId : "dataList", // 相当于同时设置了clearId和empty.warpId;
			// 简化写法;默认null; 注意vue中不能配置此项
			toTop : { // 配置回到顶部按钮
				src : "../res/img/mescroll-totop.png", // 默认滚动到1000px显示,可配置offset修改
			// offset : 1000
			},
			lazyLoad : {
				use : true
			// 是否开启懒加载,默认false
			}
		}
	});
  • 打赏
  • 举报
回复
web_1993 2018-12-18
每次执行上拉加载的操作时 都要将现在的页码传给后台接口 获取对应页码的数据即可
  • 打赏
  • 举报
回复
别后旅程_ 2018-08-09
URL请求需要带参数
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2017-11-03 01:55
社区公告
暂无公告