wenju
wenju
  • 发布:2017-08-01 23:44
  • 更新:2019-08-22 16:51
  • 阅读:11536

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

分类:MUI

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谢谢

14 关注 分享
语嫣 常山赵子龙 赵梦欢 五叶神 猫咪老师 天涯逐浪 1245241215@qq.com 指尖上的代码 Native_O lyzcren 罗纳尔哆嗦 358185420@qq.com 洛上千栀 gewj1023@163.com

要回复文章请先登录注册

845572627@qq.com

845572627@qq.com

支持小程序吗
2019-08-22 16:51
297091002@qq.com

297091002@qq.com

uniapp怎么用
2019-02-24 09:59
木杉丶

木杉丶

很好用,官方的太单调了,而且还不能改,以后都不用官方的了
2018-09-08 11:23
wenju

wenju (作者)

回复 jspeng:
https://github.com/mescroll/mescroll/tree/master/vue-demo
2018-08-31 14:13
jspeng

jspeng

回复 wenju:
您好 有Vue 实现的demo吗?我尝试用Vue来写 一直没有成功总是感觉少了点什么,又找不出来
2018-08-31 10:12
老火

老火

下个测试一下,官方的下拉太难看了,还不能自定样式
2018-08-30 19:32
itxiaoxiao

itxiaoxiao

轮播菜单每个nav都有数万的数据列表,我想问下中低端手机上拉过多会不会卡顿啊
2018-08-15 15:59
wenju

wenju (作者)

回复 Native_O:
感谢支持 O(∩_∩)O 能帮到您 很开心
2018-01-25 18:22
Native_O

Native_O

我是从搜腾讯的biz.scroll搜索到的mescroll的,刚看了下官网的示例,真的好强大,mui还没实现的它都已经做好了,而且是一些市面上的各种主流刷新效果,真心挺赞!
2018-01-25 11:49
wenju

wenju (作者)

回复 指尖上的代码:
https://github.com/mescroll/mescroll
2017-11-28 12:12