关于MeScroll的下拉刷新，上拉加载的js框架的学习和使用
1. 首先献上官网地址和资源
官网：http://www.mescroll.com/
js，css百度云链接：https://pan.baidu.com/s/1_WV5BQ2N2TLhfpW_U9GHxw
密码：44cy
mescroll.js
mescroll.css
mescroll-option.js
mescroll-option.css
2.具体前端后端代码（html没有加入其他样式）
引入上面的js和css
//id可以改,而"mescroll"的class不能删
3.讲解
其实上面的很多在mescroll.js里面都有详细的注解
//下拉刷新的配置
MeScroll.extend(optDown, {
use: true, //是否启用下拉刷新; 默认true
auto: true, //是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
autoShowLoading: false, //如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
isLock: false, //是否锁定下拉刷新,默认false;
isBoth: false, //下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认false,两者不可同时触发;
offset: 80, //在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
outOffsetRate: 0.2, //在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
bottomOffset: 20, //当手指touchmove位置在距离body底部20px范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
minAngle: 45, //向下滑动最少偏移的角度,取值区间 [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
hardwareClass: "mescroll-hardware", //硬件加速样式,解决部分手机闪屏或动画不流畅的问题
warpId: null, //可配置下拉刷新的布局添加到指定id的div;默认不配置,默认添加到mescrollId
warpClass: "mescroll-downwarp", //下拉刷新的布局容器样式,参见mescroll.css
resetClass: "mescroll-downwarp-reset", //下拉刷新高度重置的动画,参见mescroll.css
htmlContent: '下拉刷新
', //布局内容
inited: function(mescroll, downwarp) {
//下拉刷新初始化完毕的回调
mescroll.downTipDom = downwarp.getElementsByClassName("downwarp-tip")[0];
mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0];
},
inOffset: function(mescroll) {
//下拉的距离进入offset范围内那一刻的回调
if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "下拉刷新";
if(mescroll.downProgressDom) mescroll.downProgressDom.classList.remove("mescroll-rotate");
},
outOffset: function(mescroll) {
//下拉的距离大于offset那一刻的回调
if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "释放更新";
},
onMoving: function(mescroll, rate, downHight) {
//下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度
if(mescroll.downProgressDom) {
var progress = 360 * rate;
mescroll.downProgressDom.style.webkitTransform = "rotate(" + progress + "deg)";
mescroll.downProgressDom.style.transform = "rotate(" + progress + "deg)";
}
},
beforeLoading: function(mescroll, downwarp) {
//准备触发下拉刷新的回调
return false; //如果return true,将不触发showLoading和callback回调; 常用来完全自定义下拉刷新, 参考案例【淘宝 v6.8.0】
},
showLoading: function(mescroll) {
//显示下拉刷新进度的回调
if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "加载中 ...";
if(mescroll.downProgressDom) mescroll.downProgressDom.classList.add("mescroll-rotate");
},
callback: function(mescroll) {
//下拉刷新的回调;默认重置上拉加载列表为第一页
mescroll.resetUpScroll();
}
})
}
/*配置参数:上拉加载*/
MeScroll.prototype.extendUpScroll = function(optUp) {
//是否为PC端,如果是scrollbar端,默认自定义滚动条
var isPC = this.os.pc;
//上拉加载的配置
MeScroll.extend(optUp, {
use: true, //是否启用上拉加载; 默认true
auto: true, //是否在初始化完毕之后自动执行上拉加载的回调; 默认true
isLock: false, //是否锁定上拉加载,默认false;
isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发;
isBounce: true, //是否允许ios的bounce回弹;默认true,允许; 如果设置为false,则除了mescroll, mescroll-touch, mescroll-touch-x, mescroll-touch-y能够接收touchmove事件,其他部分均无法滑动,能够有效禁止bounce
callback: null, //上拉加载的回调;function(page,mescroll){ }
page: {
num: 0, //当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 10, //每页数据的数量
time: null //加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
},
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
offset: 100, //列表滚动到距离底部小于100px,即可触发上拉加载的回调
toTop: {
//回到顶部按钮,需配置src才显示
warpId: null, //父布局的id; 默认添加在body中
src: null, //图片路径,默认null;
html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
offset: 1000, //列表滚动多少距离才显示回到顶部按钮,默认1000
warpClass: "mescroll-totop", //按钮样式,参见mescroll.css
showClass: "mescroll-fade-in", //显示样式,参见mescroll.css
hideClass: "mescroll-fade-out", //隐藏样式,参见mescroll.css
duration: 300, //回到顶部的动画时长,默认300ms
supportTap: false //如果您的运行环境支持tap,则可配置true;
},
loadFull: {
use: false, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
},
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;
warpId: null, //父布局的id; 如果此项有值,将不使用clearEmptyId的值;
icon: null, //图标路径
tip: "暂无相关数据~", //提示
btntext: "", //按钮
btnClick: null, //点击按钮的回调
supportTap: false //如果您的运行环境支持tap,则可配置true;
},
clearId: null, //加载第一页时需清空数据的列表id; 如果此项有值,将不使用clearEmptyId的值;
clearEmptyId: null, //相当于同时设置了clearId和empty.warpId; 简化写法;
hardwareClass: "mescroll-hardware", //硬件加速样式,使上拉动画流畅
warpId: null, //可配置上拉加载的布局添加到指定id的div;默认不配置,默认添加到mescrollId
warpClass: "mescroll-upwarp", //上拉加载的布局容器样式
htmlLoading: '加载中..
', //上拉加载中的布局
htmlNodata: '-- END --
', //无数据的布局
inited: function(mescroll, upwarp) {
//初始化完毕的回调,可缓存dom 比如 mescroll.upProgressDom = upwarp.getElementsByClassName("upwarp-progress")[0];
},
showLoading: function(mescroll, upwarp) {
//上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染
upwarp.innerHTML = mescroll.optUp.htmlLoading;
},
showNoMore: function(mescroll, upwarp) {
//无更多数据
upwarp.innerHTML = mescroll.optUp.htmlNodata;
},
onScroll: null, //列表滑动监听,默认null; 例如 onScroll: function(mescroll, y, isUp){ }; //y为列表当前滚动条的位置; isUp=true向上滑,isUp=false向下滑
scrollbar: {
use: isPC, //默认只在PC端自定义滚动条样式
barClass: "mescroll-bar"
}
})我代码里的下拉刷新没有重新写，所以只有一个up（上拉加载）,如果重新写，就是down,格式照着up就可以了，但是里面的参数就需要对着上面的js来写。
我写这个功能的时候是在微信公众号里面，一个商城，主要应用在商城首页商品的展示，我的订单的查询。这个框架是自带类似分页功能的的，上拉加载拉一次就加载后面的一页，一页10条数据，可在js里面修改，加载快慢也可以修改，这些都不是问题，问题主要还是这个MeScroll样式会与原来页面样式冲突，这就需要手动调试，我说的样式并不是排版，而是一些适配问题，因为是公众号一般是在手机上使用，我调试的时候是在谷歌浏览器上模拟的手机尺寸进行的，手机和电脑的区别是在你向下或者向上滑动时，电脑用的是鼠标滚轮，而手机是用的手指，用手指就意味着会按住屏幕，当你向上向下滑动时，会认为你在时时的上拉加载，或者下拉刷新，导致你认为正常的滑动变得非常缓慢甚至卡死。
其实这个前段框架在js部分就已经区别了手机端和电脑端，甚至还专门适配的ios的部分效果，所以归根到底就是我的前端样式出了问题，刚开始我一直以为js部分会有解决这个问题的参数，只需要设置true和false就可以了，但是我从头到尾看了一遍，发现没有，这时我就不开心了。到网上找了下这个问题的原因，发现几乎没有人讲到这个，但是有个类似的问题说可能是样式的问题，我就看了看，从前端样式入手，调了很多次，差点把页面调崩了，但是可喜的是最后还是调好了，原来
//id可以改,而"mescroll"的class不能删
这个里面
包含的范围应该是整个里面的所有内容，当然了，还是要视情况而定，反正范围要大，而且class="mescroll"和 class="data-list"里的样式根据你原本的页面样式还要重写/*列表*/
.mescroll{
position: fixed;//生成绝对定位的元素，相对于浏览器窗口进行定位
top: 44px;
bottom: 44px;
height: auto;
}
/*展示上拉加载的数据列表*/
.data-list div{
position: relative;//生成相对定位的元素，相对于其正常位置进行定位。
}这个也要重写，body，当然了，这就要看原本的格式问题
html,body{
padding-top:0.92rem;
}写到这里就要结束啦。
展示下效果图：
下拉刷新：
上拉加载：
当没有数据可加载后：
