mescroll下拉刷新和上拉加载js框架

所属分类:UI,输入-加载,滚动,拖和放

 49686  478  查看评论 (32)
分享到微信朋友圈
X
mescroll下拉刷新和上拉加载js框架 ie兼容10

使用方法

1. 下载并引用 mescroll.min.css , mescroll.min.js

2. 拷贝以下布局结构 :

<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
    //列表内容,如:<ul>列表数据</ul> ...
</div>

3. 创建mescroll对象 :

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. 处理回调 :

//下拉刷新的回调
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(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();
        }
    });
}
相关插件-加载,滚动,拖和放

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 40214  381

3D立体环形进度图表

3D立体环形进度图表,只要传入0100的整数,就能显示对应的百分比,大小自适应。
  加载
 32016  327

jQuery横向及纵向进度条插件

jQuery横向及纵向进度条插件,可控制速度,可设为递增递减进度,可繁可简,颜色尺寸随心所欲!简单使用,使用方法一应俱全。
  加载
 31772  326

jQuery 圆型进度条

jQuery canva圆型进度条,可通参数快速修改进度条
  加载
 33447  338

讨论这个项目(32)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    凵骞 0
    2019/12/29 17:39:07
    怎么在其他方法调用上拉加载方法 回复
    ricefoto 0
    2019/7/8 18:09:51
    如果用到wap页面,用浏览器刷新每次都回到顶部,怎么处理下刷新后还停留在当前位置? 回复
    星幻弥尘 0
    2019/6/18 17:27:36
    上下那两块加载中没有,就是没有任何动画效果就加载出来了,怎么解决?
        星幻弥尘0
        2019/6/18 17:53:30
        之前是top没调好 真正的问题是:上滑下啦数据都出来了;上划的动画效果没有;应该出现在下面的END出现在了上面,导致上面多了一块空白;看空白的大小应该是上下两块都在上面了,没消失
        王先森i0
        2020/7/25 8:43:17
        老哥怎么解决的
    回复
    Peter@小飞侠 0
    2018/10/29 17:02:36
    能取消其中的一个功能吗
        幸福~手掌1
        2019/11/29 11:43:50
        down: {
            use: false, //是否初始化下拉刷新; 默认true
        },
        幸福~手掌0
        2019/11/29 11:47:53
        在down:{}或者up:{}里面添加use: false,//是否初始化下拉刷新; 默认true
    回复
    太阳以西 0
    2018/10/18 15:35:04
    为什么ajax返回的数据只有十条。。
        太阳以西0
        2018/10/22 14:15:35
        找到原因了
        ??の??0
        2018/11/2 12:59:18
        后端怎么反数据呀请问
        傲娇航??0
        2019/11/20 15:49:09
        怎么解决的啊
    回复
    insist 0
    2018/9/11 15:08:28
    . 0
    2018/8/24 16:40:15
    大致测了下,还是挺好用的,感谢分享 回复
    微笑@么么哒! 0
    2018/6/11 16:35:26
    我引入进来为什么没有反应 回复
    请叫我老曹?? 0
    2018/5/17 10:20:51
    您好,这边为什么放到项目里就报错呢。JS文件都加载出来了,就是报Uncaught ReferenceError: MeScroll is not defined
        圆的方0
        2018/12/26 15:47:13
        找到解决办法了吗?同问,放到一个对象里的时候就会出现这个问题啊
        DearAna0
        2020/3/24 15:45:35
        目前也遇到这个问题了,请问有找的原因及解决方案吗?
        25h1
        2020/12/15 16:55:21
        除了要引入mescroll.min.js,还要再引入mescroll-option.js;它案例里面的注释写明了
    回复
    JQ.Xu 0
    2018/5/10 10:30:24
    用框架做了商品列表的展示 但是怎么查看不了商品详情呢 查看商品详情应该怎么写 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复