本文探讨了mescroll插件在遇到下拉刷新和上拉加载功能失效的情况，通过官方文档和简单代码示例提供了解决方案，旨在帮助遇到同样问题的开发者。
我用这个插件是因为 我的一个朋友说mescoll只有上拉功能。下拉功能无法使用，配置了也无效。所以 我就简单的用几分钟模拟了一下。一定是不完美的。希望能帮助别人哪怕一个人也好。
快速开始 :
- 下载并引用 mescroll.min.css , mescroll.min.js（两种引用方式）
// 第一种:
<link rel="stylesheet" href="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.css">
<script src="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.js" charset="utf-8"></script>
// 第二种:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.0/mescroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.0/mescroll.min.js" charset="utf-8"></script>
- 拷贝以下布局结构 :
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
<div> //这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)
//内容...
</div>
</div>
- 固定mescroll的div高度. 推荐通过定位的方式,简单快捷: (点此查看其他方法)
.mescroll{
position: fixed;
top: 44px;
bottom: 0;
height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
- 创建mescroll对象 （说真的功能太强大以至于看得有点头大，没关系最后有简单的代码）
var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
down: {
callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
},
up: {
callback: upCallback, //上拉加载的回调
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
},
htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
这就是为什么无更多数据有时候不显示的原因.
toTop: {
//回到顶部按钮
src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮
},
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图
tip: "暂无相关数据~" //提示
},
lazyLoad: {
use: true // 是否开启懒加载,默认false
attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图 src='占位图''/>
}
}
});
- 处理回调 :
//下拉刷新的回调
function downCallback() {
$.ajax({
url: 'xxxxxx',
success: function(data) {
//联网成功的回调,隐藏下拉刷新的状态;
mescroll.endSuccess(); //无参. 注意结束下拉刷新是无参的
//设置数据
//setXxxx(data);//自行实现 TODO
},
error: function(data) {
//联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
}
});
}
//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {
$.ajax({
url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?
success: function(curPageData) {
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
//列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
//必传参数(当前页的数据个数, 总页数)
//mescroll.endByPage(curPageData.length, totalPage);
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//必传参数(当前页的数据个数, 总数据量)
//mescroll.endBySize(curPageData.length, totalSize);
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//必传参数(当前页的数据个数, 是否有下一页true/false)
//mescroll.endSuccess(curPageData.length, hasNext);
//结束下拉刷新的 mescroll.endSuccess()无参.
//结束上拉加载 curPageData.length必传的原因:
1.使配置的noMoreSize 和 empty生效
2.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
比传入的totalPage, totalSize, hasNext具有更高的判断优先级
3.当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页
传totalPage, totalSize, hasNext主要目的是避免方法四描述的小问题
//设置列表数据
//setListData(curPageData);//自行实现 TODO
},
error: function(e) {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
}
});
}
最后奉献一个特别丑的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <link rel="stylesheet" href="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.css">
<script src="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.js" charset="utf-8"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.css">
<script src="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.js" charset="utf-8"></script>
</head>
<body>
<div id="mescroll" class="mescroll">
<div id="box">
</div>
</div>
<script>
var box=document.getElementById("box");
var num=0;
list();
// 创建数据的方法
function list(){
for(var i=1;i<11;i++)
{
var p=document.createElement("div");
p.className="abs";
p.innerHTML=num;
box.appendChild(p);
num++;
}
}
var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
up: {
clearEmptyId:"box",//上面的id
isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
isBounce: true, //此处禁止ios回弹,
callback: upCallback, //上拉加载的回调
toTop:{ //配置回到顶部按钮
src : "mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
}
},
down: {
clearEmptyId:"box",//上面的id
isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
isBounce: true, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点):
callback: downCallback, //上拉加载的回调
toTop:{ //配置回到顶部按钮
src : "mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
}
},
});
function downCallback(){
console.log("下拉开始了");
// list();
//下拉停止
setTimeout(function(){
mescroll.endSuccess()
},1500);
// mescroll.resetUpScroll()
}
function upCallback(){
console.log("上拉开始了");
setTimeout(function(){
mescroll.endSuccess(19, true)
list();
},2000);
}
</script>
<style>
.mescroll{
position: fixed;
top: 44px;
bottom: 0;
height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
.abs{
width:400px;
height: 63px;
border:1px solid #f00;
}
</style>
</body>
</html>
扫一扫
6433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
