-
原生js,不依赖jquery,zepto等框架
-
一套代码多端运行. 完美运行于android,iOS,手机浏览器,兼容PC主流浏览器
-
参数自由搭配, 随心定制, 轻松拓展
-
超详细注释,读懂源码 so easy
-
主流APP案例, 丰富经典
- 功能亮点
- 快速入门
- API文档
- 常用方法
- 其他方法
- 基础案例 base demos
- 中级案例 intermediate demos
- 高级案例 senior demos
- 下载基础中级案例源码
- 获取高级案例源码
- 打赏排行榜
-
自动判断和提示列表无任何数据或无更多数据
-
支持监听列表滚动事件,无需手动判断处理列表的页码,时间等变量
-
可指定列表滚动到任何位置,附带平滑效果一键滚动到顶部或底部
-
可配置列表数据不满屏时,自动加载下一页
-
一个界面可支持多个下拉刷新,上拉加载
-
可临时锁定下拉刷新和上拉加载
-
引用 mescroll.min.css , mescroll.min.js
-
拷贝以下布局结构:
<div id="mescroll" class="mescroll">
//列表内容,如:<ul>列表数据</ul> ...
</div>
- 创建MeScroll对象:
var mescroll = new MeScroll("mescroll", {
down: {
callback: downCallback //下拉刷新的回调
},
up: {
callback: upCallback //上拉加载回调,简写callback:function(page){upCallback(page);}
}
});
- 处理回调:
//下拉刷新的回调
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:每页数据条数
function upCallback(page){
$.ajax({
url: 'xxxxxx?num='+ page.num +"&size="+ page.size,
success: function(data){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//参数data.length:当前页的数据总数
//mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
//列表如果无下一页数据,则提示无更多数据;
//如果不传data.length,则仅隐藏下拉刷新和上拉加载的状态.例如downCallback
mescroll.endSuccess(data.length);
//设置列表数据
//setListData(data);//自行实现 TODO
},
error: function(data){
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
}
});
}
------ 以上为mescroll最基本的用法,强烈建议您下载并查看 mescroll基础案例 , 发现mescroll更强大的功能 ~
------ 基础案例一共5个, 每个案例3分钟, 一共花您15分钟; 这15分钟您将了解mescroll在不同情况下应如何快速配置 ~
------ 磨刀不误砍柴工,心急吃不了热豆腐. 请静下心来体验与理解mescroll, 一定会让您事半功倍 ~
//创建mescroll对象
var mescroll = new MeScroll("mescroll", { down: {下拉刷新的配置参数}, up: {上拉加载的配置参数} });
| down 下拉刷新的配置参数 | ||
| 参数名 | 默认值 | 说明 |
| use | true | 是否启用下拉刷新 |
| auto | true | 是否在初始化完毕之后自动执行下拉刷新的回调 |
| autoShowLoading | false | 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度 |
| isLock | false | 是否锁定下拉刷新 |
| isBoth | false | 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载 |
| offset | 80 | 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调 |
| outOffsetRate | 0.2 | 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值越接近0,高度变化越小,表现为越往下越难拉 |
| mustToTop | iOS默认值为false 其他默认为true |
是否必须滑动到顶部才能下拉;因为列表回弹效果(-webkit-overflow-scrolling:touch)是iOS专属样式,所以iOS默认false,其他默认为true |
| hardwareClass | "mescroll-hardware" | 硬件加速样式,解决iOS下拉因隐藏进度条而闪屏的问题,参见mescroll.css |
| warpClass | "mescroll-downwarp" | 下拉刷新的布局容器样式,参见mescroll.css |
| resetClass | "mescroll-downwarp-reset" | 下拉刷新高度重置的动画,参见mescroll.css |
| htmlContent | '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新</p>' | 下拉刷新的布局内容 |
| inited | function(mescroll, downwarp) { ... } | 下拉刷新初始化完毕的回调(mescroll实例对象,下拉刷新容器dom对象) |
| inOffset | function(mescroll) { ... } | 下拉的距离进入offset范围内那一刻的回调(mescroll实例对象) |
| outOffset | function(mescroll) { ... } | 下拉的距离大于offset那一刻的回调(mescroll实例对象) |
| onMoving | function(mescroll, rate, downHight) { ... } | 下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度 |
| beforeLoading | function(mescroll, downwarp) { return false; } | 准备触发下拉刷新的回调; 如果要完全自定义下拉刷新,那么return true,此时将不触发showLoading和callback回调; 参考案例【淘宝 v6.8.0】 |
| showLoading | function(mescroll) { ... } | 显示下拉刷新进度的回调 |
| callback | function(mescroll) { mescroll.resetUpScroll(); } | 下拉刷新的回调; 默认重置上拉加载列表为第一页 |
| up 上拉加载的配置参数 | ||
| 参数名 | 默认值 | 说明 |
| use | true | 是否启用上拉加载 |
| auto | false | 是否在初始化完毕之后自动执行上拉加载的回调 |
| isLock | false | 是否锁定上拉加载 |
| isBoth | false | 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新 |
| offset | 100 | 列表滚动到距离底部小于100px,即可触发上拉加载的回调 |
| noMoreSize | 5 | 如果列表已无数据,可设置列表的总数量要大于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看 |
| resetShowDownScroll | false | 重置上拉加载数据,是否显示下拉刷新的进度布局 |
| toTop | { src: null, offset: 1000, warpClass: "mescroll-totop", showClass: "mescroll-fade-in", hideClass: "mescroll-fade-out", duration: 300 } |
回到顶部按钮的配置: src: 图片路径,必须配置src才会显示回到顶部按钮,不配置不显示 offset: 列表滚动1000px显示回到顶部按钮 warpClass: 按钮样式,参见mescroll.css showClass: 显示样式,参见mescroll.css hideClass: 隐藏样式,参见mescroll.css duration: 回到顶部的动画时长 |
| loadFull | { use: false, delay: 500 } |
use: 列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止; 默认false,因为可通过调高page.size避免这个情况 delay: 延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕; |
| empty | { warpId: null, icon: null, tip: "暂无相关数据~", btntext: "", btnClick: null } |
列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效 warpId: 父布局的id; 如果此项有值,将不使用clearEmptyId的值; icon: 空布局的图标路径 tip: 提示文本 btntext: 按钮文本 btnClick: 点击按钮的回调 |
| clearId | null | 加载第一页时需清空数据的列表id; 如果此项有值,将不使用clearEmptyId的值 |
| clearEmptyId | null | 相当于同时设置了clearId和empty.warpId; 简化写法 |
| hardwareClass | "mescroll-hardware" | 硬件加速样式,使动画更流畅,参见mescroll.css |
| warpClass | "mescroll-upwarp" | 上拉加载的布局容器样式,参见mescroll.css |
| htmlLoading | '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>' | 上拉加载中的布局,参见mescroll.css |
| htmlNodata | '<p class="upwarp-nodata">-- END --</p>' | 无数据的布局,参见mescroll.css |
| inited | function(mescroll, upwarp){} | 初始化完毕的回调; 回调(mescroll实例, upwarp上拉加载的布局Dom对象) |
| showLoading | function(mescroll, upwarp){ ... } | 显示上拉加载中的回调; 回调(mescroll实例, upwarp上拉加载的布局Dom对象) |
| showNoMore | function(mescroll, upwarp){ ... } | 显示无更多数据的回调; 回调(mescroll实例, upwarp上拉加载的布局Dom对象) |
| onScroll | null | 列表滑动监听, 默认null 例 onScroll : function(mescroll, y){ ... }; y为列表当前滚动条的位置) |
| callback | function(page,mescroll){} | 上拉加载的回调; 回调(page对象,mescroll实例), 其中page={num:页码, size:每页数据的数量, time:第一页数据的时间} |
| page | { num:0, size:10, time:null } |
num: 当前页码,默认0,回调之前会加1,即callback(page)会从1开始; size: 每页数据的数量; time: 加载第一页数据服务器返回的时间;防止用户翻页时,后台新增了数据从而导致下一页数据重复; |
| 方法名 | 说明 |
| mescroll.endSuccess( dataSize, systime ); |
隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用 dataSize : 当前页获取的数据总数 如果传了dataSize, 那么mescroll会自动判断: 列表若无任何数据,则提示空,显示empty配置的内容(需配置empty或clearEmptyId) 列表若无下一页数据,则提示无更多数据,显示htmlNodata配置的内容; 如果不传dataSize, 则仅隐藏下拉刷新和上拉加载的状态 systime : 加载第一页数据的服务器时间 (可空); 防止用户翻页时,后台新增了数据从而导致下一页数据重复; |
| mescroll.endErr(); | 隐藏下拉刷新和上拉加载的状态, 在联网获取数据失败后调用; mescroll内部会自动恢复原来的页码,时间等变量; |
| mescroll.triggerDownScroll(); | 主动触发下拉刷新 |
| mescroll.triggerUpScroll(); | 主动触发上拉加载 |
| mescroll.resetUpScroll(); | 重置列表 |
| mescroll.scrollTo( y ); | 滚动列表到指定位置 ( y=0回到列表顶部; 如需滚动到列表底部,可设置y很大的值,比如y=99999 ) |
| mescroll.optDown; | 获取下拉刷新的配置 |
| mescroll.optUp; | 获取上拉加载的配置 |
| mescroll.lockDownScroll( isLock ); | 锁定下拉刷新 ( isLock=ture,null 锁定 ; isLock=false 解锁 ) |
| mescroll.lockUpScroll( isLock ); | 锁定上拉加载 ( isLock=ture,null 锁定 ; isLock=false 解锁 ) |
| 如果您已通读并理解 mescroll源码, 以下方法可灵活运用于更复杂的场景 知其然, 知其所以然, 源码注释超详细, 读懂源码so easy~ | |
| mescroll.showDownScroll(); | 显示下拉刷新的进度布局 mescroll.triggerDownScroll() 和 mescroll.resetUpScroll() 内部有调用 |
| mescroll.endDownScroll(); | 隐藏下拉刷新的进度布局 mescroll.endSuccess() 和 mescroll.endErr() 内部有调用 |
| mescroll.showUpScroll(); | 显示上拉加载的进度布局 mescroll.triggerDownScroll() 和 mescroll.resetUpScroll() 内部有调用 |
| mescroll.showNoMore(); | 显示上拉无更多数据的布局 mescroll.endUpScroll() 内部有调用 |
| mescroll.hideUpScroll(); | 隐藏上拉加载的布局 mescroll.endUpScroll() 内部有调用 |
| mescroll.clearDataList(); | 清空上拉加载的数据列表 mescroll.resetUpScroll() 和 mescroll.endSuccess() 内部有调用 |
| mescroll.loadFull(); | 检查如果加载的数据过少,无法触发上拉加载时,则自动加载下一页,直到满屏或无数据 此方法最好在列表的图片数据加载完成之后调用,以便计算列表内容高度的准确性 mescroll.endSuccess() 内部有调用 |
| mescroll.showEmpty(); | 显示无任何数据的空布局 mescroll.endSuccess() 内部有调用 |
| mescroll.removeEmpty(); | 移除无任何数据的空布局 mescroll.endSuccess() 内部有调用 |
| mescroll.showTopBtn(); | 显示回到顶部的按钮 |
| mescroll.hideTopBtn(); | 隐藏回到顶部的按钮 |
| mescroll.css , mescroll.min.css | mescroll.js , mescroll.min.js | mescroll所有基础案例源码 | mescroll所有中级案例源码 |
| 【立即下载】 | |||
|
mescroll高级案例源码 -- 淘宝 v6.8.0 mescroll高级案例源码 -- 京东 v6.1.0 mescroll高级案例源码 -- 美团 v8.2.3 mescroll高级案例源码 -- 美囤妈妈 v2.0.5 |
|
【 获取方法一 】 我是大神 , 我为mescroll添砖加瓦 在 GitHub 上 Star 和 Fork 了 mescroll 并提出优化或改进建议 且Pull requests 获得了采纳 ~ |
|
【 获取方法二 】 我爱分享 , 编写mescroll相关案例 联系 QQ 2260429223 投稿 评审优化后,在mescroll官网展示 源码指向您的GitHub |
|
【 获取方法三 】 我不做伸手党, 打赏任意金额 联系 QQ 2260429223 获取高级案例源码 打赏排行 榜上有名 |
| 用户昵称 | 留言备注 | 友情链接 |
| 浙江雅布力母婴用品有限公司 | 简单,易上手,可拓展,赞一个! 雅布力APP, 微信商城 PC官网都在用 真正一套代码多处运行． |
http://www.yblbaby.com |
| 深圳小码哥技术有限公司 | 小姑娘, 加油. 以资鼓励 ! | |
| 淡然 | 谢谢帮了大忙! 小小心意,望不介意 难得美女写文档这么认真. 这年头戏子当道,人家玩个直播卖个萌, 鱼丸飞机火箭礼物刷刷. 我们写代码的 咋就.. |
|
| dbc粉 | good ~ thinkyou ~ | https://github.com/bendc/sprint |
| 语嫣 | 很热情啊, 本人css动画不是很会, 感谢作者帮我调通 !! ~\(≧▽≦)/~ | |
| 坏人不坏 | O(∩_∩)O谢谢. *元拿好, 不多不少. 源码发我邮箱. | |
| 我曾经是个王者 | TMD 老子是土豪!! 老铁 *.**块!! 拿走!! 不谢!! 双击屏幕666666 |
|
| 远方很远 | 谢谢作者耐心指导, 解决了我的大问题! 文档写得挺好, 结合案例入门很快. 天气热,赏你*个硬币,快去商店拿片西瓜避暑 |
|
| 欲望的都市 | *块钱我还是有的, *.** = 有点溜吧 | |
| 缺爱不缺钙 | 我在马路边捡到*块钱, 我没交给警察叔叔, 交给mescroll 快给我源码 !! PS 我这样会不会上榜 嘿嘿 |