插件描述：mescroll精致的下拉刷新和上拉加载js框架.原生js, 支持vue, 不依赖jquery, zepto, 比iScroll,dropload精简强大; 一套代码多端运行: 完美运行于android,iOS,手机各浏览器,兼容PC端主流浏览器; 参数自由搭配,随心定制,轻松拓展; 主流APP案例,丰富经典
使用方法
1. 下载并引用 mescroll.min.css , mescroll.min.js
2. 拷贝以下布局结构 :
1 2 3 | <div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删 //列表内容,如:<ul>列表数据</ul> ...</div> |
3. 创建mescroll对象 :
1 2 3 4 5 6 7 8 9 10 | var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例 //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback down: { callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了 }, up: { callback: upCallback //上拉加载的回调 }}); |
4. 处理回调 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | //下拉刷新的回调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:每页数据条数,默认10function upCallback(page) { $.ajax({ url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ? success: function(data) { //联网成功的回调,隐藏下拉刷新和上拉加载的状态; //参数data.length:当前页的数据总数 //mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容; //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置) //如果你需要强制显示无更多数据,则mescroll.endSuccess(0),注意noMoreSize的配置 //如果不传data.length,则仅隐藏下拉刷新的状态 mescroll.endSuccess(data.length); //设置列表数据 //setListData(data);//自行实现 TODO }, error: function(e) { //联网失败的回调,隐藏下拉刷新和上拉加载的状态 mescroll.endErr(); } });} |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery粒子背景插件circleMagic.js
- 下一个特效： vue2.0可拖拽，点击可滑动进度条