【交流分享】原生js实现下拉刷新上拉加载,一套代码多端运行.经典APP案例,支持vue,流应用,兼容手机及PC浏览器

8月伊始,好东西与大家一起分享~

好久没有写东西了,这大半年都在忙公司的项目.永远也弄不完的需求; APP做好了,新的需求要把APP搬到微信端, 微信端好不容易改好了, 还要做一个版本发到PC官网; PC官网弄好了,接下来还得研究一下小程序,小程序还没整明白,新来的产品说要用vue优化一下项目~~(>_<)~~
挺感谢HBuilder提供的平台,让APP大部分代码能够迁移到其他平台;省了不少功夫;
然后有些组件就不好弄了,比如双webview的下拉刷新,上拉加载; 如果涉及到菜单切换,或者要刷新父webview的情况就比较复杂了;APP一套代码,微信端也弄一套,维护起来比较麻烦;
于是抽空用原生js实现了下拉刷新上拉加载,完美运用于android,ios,兼容手机及PC主流浏览器,一套代码多端运行.支持vue,流应用,

mescroll -- 精致的下拉刷新和上拉加载js框架 (JS framework for pull-refresh and pull-up-loading)

功能亮点 :
1.自动判断和提示列表无任何数据或无更多数据
2.支持监听列表滚动事件,无需手动判断处理列表的页码,时间等变量
3.可指定列表滚动到任何位置,附带平滑效果一键滚动到顶部或底部
4.可配置列表数据不满屏时,自动加载下一页
5.一个界面可支持多个下拉刷新,上拉加载
6.可临时锁定下拉刷新和上拉加载
7......

先看看
mescroll主流APP案例:

【仿淘宝 v6.8.0】APP的下拉刷新上拉加载

【仿京东 v6.1.0】APP的下拉刷新上拉加载

【仿贝贝 v6.0.0】APP的下拉刷新上拉加载

【仿新浪微博 v7.6.1】APP的下拉刷新上拉加载

【雅布力 v2.4.0】APP的下拉刷新上拉加载

快速入门 :

1 引用 mescroll.min.css , mescroll.min.js

2 拷贝以下布局结构:

<div id="mescroll" class="mescroll">  
       //列表内容,如:<ul>列表数据</ul> ...  
</div>  

3 创建MeScroll对象:

var mescroll = new MeScroll("mescroll", {  
            down: {  
            callback: downCallback //下拉刷新的回调  
        },  
        up: {  
            callback: upCallback //上拉加载回调,简写callback:function(page){upCallback(page);}  
        }  
    });

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:每页数据条数  
        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文档及案例:
https://github.com/mescroll/mescroll

8月伊始,好东西与大家一起分享,

如使用中有任何问题,可发帖提问@我; 或者发私信;
提问前最好能提供重现问题的案例~O(∩_∩)O谢谢