移动端上拉加载下拉刷新插件-mescroll.js插件

[亡魂溺海] 提交于 2019-12-26 02:51:36

官网地址是:http://www.mescroll.com

  1 // 初始化mescroll
  2   function initMeScroll() {
  3     //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
  4     //是否为ios设备;
  5     var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  6     //是否为PC端,如果是scrollbar端,默认自定义滚动条
  7     var isPC = typeof window.orientation == 'undefined' ;
  8     var mescroll = new MeScroll("mescroll", {
  9       //下拉刷新的所有配置项
 10       down:{
 11         use: true, //是否初始化下拉刷新; 默认true
 12         auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
 13         autoShowLoading: true, //如果在初始化完毕之后自动执行下拉回调,是否显示下拉刷新进度; 默认false
 14         isLock: false, //是否锁定下拉,默认false;
 15         isBoth: false, //下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认false,两者不可同时触发;
 16         callback: function(mescroll) {
 17           //加载轮播数据
 18           getRankingListDown();
 19           //下拉刷新的回调,默认重置上拉加载列表为第一页
 20           // mescroll.resetUpScroll();
 21         },
 22         offset: 60, //触发刷新的距离,默认80
 23         outOffsetRate: 0.2, //超过指定距离范围外时,改变下拉区域高度比例;小于1,越往下拉高度变化越小;
 24         mustToTop: !isIOS, //是否列表必须滑动到顶部才能下拉;因为列表回弹效果(-webkit-overflow-scrolling:touch)是iOS专属样式,所以iOS默认false,其他为true;
 25         hardwareClass: "mescroll-hardware", //硬件加速样式;解决iOS下拉因隐藏进度条而闪屏的问题,参见mescroll.min.css
 26         warpClass: "mescroll-downwarp", //容器,装载布局内容,参见mescroll.min.css
 27         resetClass: "mescroll-downwarp-reset", //高度重置的动画,参见mescroll.min.css
 28         htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新</p>', //布局内容
 29         inited: function(mescroll, downwarp) {
 30           console.log("down --> inited");
 31           //初始化完毕的回调,可缓存dom
 32           mescroll.downTipDom = downwarp.getElementsByClassName("downwarp-tip")[0];
 33           mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0];
 34         },
 35         inOffset: function(mescroll) {
 36           console.log("down --> inOffset");
 37           //进入指定距离offset范围内那一刻的回调
 38           if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "下拉刷新";
 39           if(mescroll.downProgressDom) mescroll.downProgressDom.classList.remove("mescroll-rotate");
 40         },
 41         outOffset: function(mescroll) {
 42           console.log("down --> outOffset");
 43           //下拉超过指定距离offset那一刻的回调
 44           if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "释放更新";
 45         },
 46         onMoving: function(mescroll, rate, downHight) {
 47           //下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离offset的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度
 48           console.log("down --> onMoving --> mescroll.optDown.offset="+mescroll.optDown.offset+", downHight="+downHight+", rate="+rate);
 49           if(mescroll.downProgressDom) {
 50             var progress = 360 * rate;
 51             mescroll.downProgressDom.style.webkitTransform = "rotate(" + progress + "deg)";
 52             mescroll.downProgressDom.style.transform = "rotate(" + progress + "deg)";
 53           }
 54         },
 55         beforeLoading: function(mescroll, downwarp) {
 56           console.log("down --> beforeLoading");
 57           //准备触发下拉刷新的回调
 58           return false; //如果要完全自定义下拉刷新,那么return true,此时将不再执行showLoading(),callback();
 59         },
 60         showLoading: function(mescroll) {
 61           console.log("down --> showLoading");
 62           //触发下拉刷新的回调
 63           if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "加载中 ...";
 64           if(mescroll.downProgressDom) mescroll.downProgressDom.classList.add("mescroll-rotate");
 65         }
 66       },
 67       //上拉加载的所有配置项
 68       up: {
 69         use: true, //是否初始化上拉加载; 默认true
 70         auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
 71         isLock: false, //是否锁定上拉,默认false;当列表没有更多数据时会自动锁定不可上拉;在endSuccess如果检查到有下一页数据,则会自动解锁true
 72         isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
 73         callback: getRankingListUp, //上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
 74         page: {
 75           num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
 76           size: 12, //每页数据条数
 77           time: null //加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
 78         },
 79         noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
 80         offset: 100, //离底部的距离
 81         resetShowDownScroll: false, //重置上拉加载数据,是否显示下拉的进度布局;默认false,默认显示上拉加载的进度布局;
 82         toTop: {
 83           //回到顶部按钮,需配置src才显示
 84           src: "", //图片路径,默认null;
 85           offset: 1000, //列表滚动多少距离才显示回到顶部按钮,默认1000
 86           warpClass: "mescroll-totop", //按钮样式,参见mescroll.min.css
 87           showClass: "mescroll-fade-in", //显示样式,参见mescroll.min.css
 88           hideClass: "mescroll-fade-out", //隐藏样式,参见mescroll.min.css
 89           duration: 300 //回到顶部的动画时长,默认300ms
 90         },
 91         loadFull: {
 92           use: false, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
 93           delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
 94         },
 95         empty: {
 96           //列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;
 97           warpId:'webGame', //父布局的id; 如果此项有值,将不使用clearEmptyId的值;
 98           icon: null, //图标,默认null
 99           tip: "暂无相关数据~", //提示
100           btntext: "", //按钮,默认""
101           btnClick: null, //点击按钮的回调,默认null
102         },
103         clearId: null, //加载第一页时需清空数据的列表id; 如果此项有值,将不使用clearEmptyId的值;
104         clearEmptyId: "", //相当于同时设置了clearId和empty.warpId; 简化写法;
105         hardwareClass: "mescroll-hardware", //硬件加速样式,动画更流畅,参见mescroll.min.css
106         warpClass: "mescroll-upwarp", //容器,装载布局内容,参见mescroll.min.css
107         htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局
108         htmlNodata: '<p class="upwarp-nodata">更多精彩敬请期待</p>', //无数据的布局
109         inited: function(mescroll, upwarp) {
110           console.log("up --> inited");
111           //初始化完毕的回调,可缓存dom 比如 mescroll.upProgressDom = upwarp.getElementsByClassName("upwarp-progress")[0];
112         },
113         showLoading: function(mescroll, upwarp) {
114           console.log("up --> showLoading");
115           //上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染
116           upwarp.innerHTML = mescroll.optUp.htmlLoading;
117         },
118         showNoMore: function(mescroll, upwarp) {
119           console.log("up --> showNoMore");
120           //无更多数据
121           upwarp.innerHTML = mescroll.optUp.htmlNodata;
122         },
123         onScroll: function(mescroll, y){ //列表滑动监听,默认onScroll: null;
124           //y为列表当前滚动条的位置
125           console.log("up --> onScroll 列表当前滚动的距离 y = " + y);
126         },
127         scrollbar: {
128           use: isPC, //默认只在PC端自定义滚动条样式
129           barClass: "mescroll-bar"
130         }
131       }
132     });
133     return mescroll;
134   }

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!