1. 首先献上官网地址和资源
官网：/
js，css百度云链接：/s/1_WV5BQ2N2TLhfpW_U9GHxw
密码：44cy
mescroll.js
mescroll.css
mescroll-option.js
mescroll-option.css
2.具体前端后端代码（html没有加入其他样式）
引入上面的js和css
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删<div id="dataList" class="data-list"></div></div>
<script type="text/javascript"> $(function(){//创建MeScroll对象var mescroll = initMeScroll("mescroll", {up: {clearEmptyId:"dataList",//上面的idisBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;isBounce: true, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): /qa.html#q10callback: getListData, //上拉加载的回调toTop:{ //配置回到顶部按钮src : "themes/option/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改//offset : 1000}},});/*初始化菜单*/var pdType=0;//全部商品0; 奶粉1; 图书2;这个我默认为0了，我的商品没有分类/* $(".nav p").click(function(){var i=$(this).attr("i");if(pdType!=i) {//更改列表条件pdType=i;$(".nav .active").removeClass("active");$(this).addClass("active");//重置列表数据mescroll.resetUpScroll();}}) *//*联网加载列表数据 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */function getListData(page){//联网加载数据getListDataFromNet(pdType, page.num, page.size, function(curPageData){//联网成功的回调,隐藏下拉刷新和上拉加载的状态;//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;console.log("pdType="+pdType+", page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);//alert(curPageData.length);//alert(page.num);//alert(page.size);//方法一(推荐): 后台接口有返回列表的总页数 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);mescroll.endSuccess(curPageData.length);//设置列表数据setListData(curPageData);}, function(){//联网失败的回调,隐藏上拉加载的状态mescroll.endErr();});}/*设置列表数据*/function setListData(curPageData){var listDom=document.getElementById("dataList");for (var i = 0; i < curPageData.length; i++) {var pd=curPageData[i];var uuid = "${uuid}";//html拼接var str="<div class='hot_prod_list'>"+"<div class='box pos_rel'>"+"<a href='../ShopIndex/products/"+pd.uuid+"/"+uuid+"'><img src='"+pd.goodPhoto+"' height='150' width='150'></a>"+"<h4><a href='../ShopIndex/products/"+pd.uuid+"/"+uuid+"'>"+pd.goodName+"</a></h4>"+"<div class='price'><span class='red new'>￥<i>"+pd.goodPrice+"</i></span><span class='old'>￥<i>"+pd.remark+"</i></span></div>"+"<a href='../ShopIndex/products/"+pd.uuid+"/"+uuid+"' class='btn_buy red pos_abs'>立即抢购</a>"+"</div>"+"</div>";$("#dataList").append(str);}}/*联网加载列表数据在您的实际项目中,请参考官方写法: /api.html#tagUpCallback请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用实际项目以您服务器接口返回的数据为准,无需本地处理分页.* */function getListDataFromNet(pdType,pageNum,pageSize,successCallback,errorCallback) {//延时0.5秒,模拟联网setTimeout(function () {$.ajax({type: 'GET',url:'../ShopIndex/indexPage/${uuid}',//data : {"uuid" : uuid},dataType: 'json',success: function(data){//alert(data);//通过ajax请求得到的数据var listData=[];//pdType 全部商品0;这个前面设置的，本来有0，1，2便于分类，我这边只有一个就注释了if(pdType==0){//全部商品 (模拟分页数据)for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {if(i==data.goodlist.length) break;listData.push(data.goodlist[i]);}}//回调successCallback(listData);},error: errorCallback});},500)//设置加载时间}});</script>
3.讲解
其实上面的很多在mescroll.js里面都有详细的注解
//下拉刷新的配置MeScroll.extend(optDown, {use: true, //是否启用下拉刷新; 默认trueauto: true, //是否在初始化完毕之后自动执行下拉刷新的回调; 默认trueautoShowLoading: false, //如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认falseisLock: 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;默认不配置,默认添加到mescrollIdwarpClass: "mescroll-downwarp", //下拉刷新的布局容器样式,参见mescroll.cssresetClass: "mescroll-downwarp-reset", //下拉刷新高度重置的动画,参见mescroll.csshtmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局内容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, //是否启用上拉加载; 默认trueauto: true, //是否在初始化完毕之后自动执行上拉加载的回调; 默认trueisLock: false, //是否锁定上拉加载,默认false;isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发;isBounce: true, //是否允许ios的bounce回弹;默认true,允许; 如果设置为false,则除了mescroll, mescroll-touch, mescroll-touch-x, mescroll-touch-y能够接收touchmove事件,其他部分均无法滑动,能够有效禁止bouncecallback: 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,则优先取srcoffset: 1000, //列表滚动多少距离才显示回到顶部按钮,默认1000warpClass: "mescroll-totop", //按钮样式,参见mescroll.cssshowClass: "mescroll-fade-in", //显示样式,参见mescroll.csshideClass: "mescroll-fade-out", //隐藏样式,参见mescroll.cssduration: 300, //回到顶部的动画时长,默认300mssupportTap: 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;默认不配置,默认添加到mescrollIdwarpClass: "mescroll-upwarp", //上拉加载的布局容器样式htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //无数据的布局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就可以了，但是我从头到尾看了一遍，发现没有，这时我就不开心了。到网上找了下这个问题的原因，发现几乎没有人讲到这个，但是有个类似的问题说可能是样式的问题，我就看了看，从前端样式入手，调了很多次，差点把页面调崩了，但是可喜的是最后还是调好了，原来
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删<div id="dataList" class="data-list"></div></div>
这个里面<div id="mescroll" class="mescroll"></div>包含的范围应该是整个<body></body>里面的所有内容，当然了，还是要视情况而定，反正范围要大，而且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;}
写到这里就要结束啦。
展示下效果图：
下拉刷新：
上拉加载：
当没有数据可加载后：
