原先公众号页面实现加载更多是通过拉到页面底部点击按钮调用ajax获取数据拼接到原数据列下，现在想通过上滑实现，网上搜索了下，发现mescroll.js是比较简单方便的，代码如下：
<%@ include file="/common/taglibs.jsp"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>列表</title>
<link rel="stylesheet" href="${ctx}/mescroll/mescroll.min.css">
<script type="text/javascript">
// 进入页面前，后台初始化页码、条数，获取总数据量
// 当前页码
var pageNo = "${pageNo}";
// 每页数据量
var pageSize = "${pageSize}";
// 总数据量
var totalCount = "${totalCount}";
//加载更多
function loadMoreNew(){
var newArr = [];
// 请求后台获取分页数据
$.ajax({
type : "POST",
url : ".....",
dataType : "json",
contentType : "application/json; charset=utf-8",
async : false,
success : function(data) {
var code = data.code;
// 得到数据集
var o = data.obj;
var html = "";
// 遍历数据集，放入数组中
for (var i = 0; i < merchants.length; i++) {
var def = o[i];
html = ".....";
newArr.push(html);
}
// 页码+1
pageNo = pageNo + 1;
},
error : function(xhr, status) {
}
});
// 返回数据
return newArr;
}
</script>
</head>
<body>
<div class="page hasheader mescroll" id="mescroll">
<div id="listDiv" class="weui-cells">
</div>
</div>
</body>
<script src="${rc.contextPath}/mescroll/mescroll.min.js"></script>
<script type="text/javascript" charset="utf-8">
// 页面加载后，先执行一次
// 以下为mescroll.js中的方法，根据需求作部分调整
$(function(){
//创建MeScroll对象
var mescroll = initMeScroll("mescroll", {
down:{
use : false, // 是否启用下拉刷新
auto : false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
},
up: {
auto : true,//初始化完毕,是否自动触发上拉加载的回调
isBoth : true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
callback : upCallback //上拉加载的回调
}
});
/*下拉刷新的回调 */
function downCallback(){
}
/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
var page = {num : pageNo, size : pageSize};
function upCallback(page){
//联网加载数据
getListDataFromNet(page.num, page.size, function(curPageData){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length + ", totalCount" + totalCount);
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
mescroll.endBySize(curPageData.length, totalCount); //必传参数(当前页的数据个数, 总数据量)
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
//mescroll.endSuccess(curPageData.length);
//设置列表数据
setListData(curPageData, true);
}, function(){
//联网失败的回调,隐藏上拉加载的状态
mescroll.endErr();
});
}
/*设置列表数据*/
function setListData(curPageData, isAppend) {
for (var i = 0; i < curPageData.length; i++) {
var newObj = curPageData[i];
$("#listDiv").append(newObj);
}
}
/*联网加载列表数据*/
var downIndex=0;
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
//延时一秒,模拟联网
setTimeout(function () {
try{
var newArr = [];
newArr = loadMoreNew();
successCallback&&successCallback(newArr);
}catch(e){
//联网失败的回调
errorCallback&&errorCallback();
}
},2000)
}
//禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
document.ondragstart=function() {return false;}
});
</script>
</html>需要注意的是，js中a.prototype.extendUpScroll方法里设置的noMoreSize初始值为5，需设置为1，这样的话如果数据只有一页且当前页数据在[1，5]之间时，页面底部会显示“-- END -- ”。
更多详细内容请到官方网站中查看文档或参考demo：http://www.mescroll.com/api.html，http://www.mescroll.com/load.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
20181101更新，下拉刷新
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>异常消息</title>
<script src="${ctx}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//进入页面前，后台初始化页码、条数，获取总数据量
//当前页码
var pageNo = "${pageNo}";
pageNo = parseInt(pageNo);
//每页数据量
var pageSize = "${pageSize}";
//总数据量
var totalCount = "${totalCount}";
//加载更多
function loadMoreNew(){
var newArr = [];
// 请求后台获取分页数据
$.ajax({
type : "POST",
url : ".....",
dataType : "json",
contentType : "application/json; charset=utf-8",
async : false,
success : function(data) {
var code = data.code;
if(code == 0){
// 得到数据集
var o = data.obj;
var html = "";
// 遍历数据集，放入数组中
for (var i = 0; i < o.length; i++) {
var def = o[i];
html = "......";
newArr.push(html);
}
// 页码+1
pageNo = pageNo + 1;
}
},
error : function(xhr, status) {
}
});
// 返回数据
return newArr;
}
</script>
</head>
<body>
<!--滑动区域-->
<div id="mescroll" class="mescroll">
<!--展示上拉加载的数据列表-->
<ul id="newsList" class="news-list">
</ul>
</div>
</body>
<script src="${ctx}/mescroll/mescroll.js"></script>
<script type="text/javascript" charset="utf-8">
// 页面加载后，先执行一次
// 以下为mescroll.js中的方法，根据需求作部分调整
$(function(){
//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
down:{
use : true, // 是否启用下拉刷新
auto : false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
callback : downCallback //下拉刷新的回调
},
up: {
auto : true,//初始化完毕,是否自动触发上拉加载的回调
isBoth : true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
isBounce: false,// 是否允许ios的bounce回弹;默认true,允许; 如果设置为false,则除了mescroll, mescroll-touch, mescroll-touch-x, mescroll-touch-y能够接收touchmove事件,其他部分均无法滑动,能够有效禁止bounce
callback : upCallback, //上拉加载的回调
toTop:{ //配置回到顶部按钮
src : "${ctx}/style/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
offset : 100
}
}
});
/*下拉刷新的回调 */
function downCallback(){
// 重新设置当前页码
pageNo = parseInt(1);
$.ajax({
url : ".......",
success : function(data){
mescroll.endSuccess(); // 无参
// 清空
$("#newsList").empty();
// 总数据量
totalCount = parseInt(data.count);
var o = data.obj;
// 遍历数据集，放入数组中
for (var i = 0; i < o.length; i++) {
var html = "";
var def = o[i];
html = "........";
$("#newsList").append(html);
}
// 页码+1
pageNo = pageNo + 1;
},
error : function(data){
mescroll.endErr();
}
});
}
/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
var page = {num : pageNo, size : pageSize};
function upCallback(page){
//联网加载数据
getListDataFromNet(page.num, page.size, function(curPageData){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
mescroll.endBySize(curPageData.length, totalCount); //必传参数(当前页的数据个数, 总数据量)
//设置列表数据
setListData(curPageData, true);
}, function(){
//联网失败的回调,隐藏上拉加载的状态
mescroll.endErr();
});
}
/*设置列表数据*/
function setListData(curPageData, isAppend) {
for (var i = 0; i < curPageData.length; i++) {
var newObj = curPageData[i];
$("#newsList").append(newObj);
}
}
/*联网加载列表数据*/
var downIndex=0;
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
//延时一秒,模拟联网
setTimeout(function () {
try{
var newArr = [];
newArr = loadMoreNew();
successCallback&&successCallback(newArr);
}catch(e){
//联网失败的回调
errorCallback&&errorCallback();
}
},2000)
}
//禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
document.ondragstart=function() {return false;}
});
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
