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

 // 初始化mescroll
function initMeScroll() {
//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
//是否为ios设备;
var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//是否为PC端,如果是scrollbar端,默认自定义滚动条
var isPC = typeof window.orientation == 'undefined' ;
var mescroll = new MeScroll("mescroll", {
//下拉刷新的所有配置项
down:{
use: true, //是否初始化下拉刷新; 默认true
auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
autoShowLoading: true, //如果在初始化完毕之后自动执行下拉回调,是否显示下拉刷新进度; 默认false
isLock: false, //是否锁定下拉,默认false;
isBoth: false, //下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认false,两者不可同时触发;
callback: function(mescroll) {
//加载轮播数据
getRankingListDown();
//下拉刷新的回调,默认重置上拉加载列表为第一页
// mescroll.resetUpScroll();
},
offset: , //触发刷新的距离,默认80
outOffsetRate: 0.2, //超过指定距离范围外时,改变下拉区域高度比例;小于1,越往下拉高度变化越小;
mustToTop: !isIOS, //是否列表必须滑动到顶部才能下拉;因为列表回弹效果(-webkit-overflow-scrolling:touch)是iOS专属样式,所以iOS默认false,其他为true;
hardwareClass: "mescroll-hardware", //硬件加速样式;解决iOS下拉因隐藏进度条而闪屏的问题,参见mescroll.min.css
warpClass: "mescroll-downwarp", //容器,装载布局内容,参见mescroll.min.css
resetClass: "mescroll-downwarp-reset", //高度重置的动画,参见mescroll.min.css
htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新</p>', //布局内容
inited: function(mescroll, downwarp) {
console.log("down --> inited");
//初始化完毕的回调,可缓存dom
mescroll.downTipDom = downwarp.getElementsByClassName("downwarp-tip")[];
mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[];
},
inOffset: function(mescroll) {
console.log("down --> inOffset");
//进入指定距离offset范围内那一刻的回调
if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "下拉刷新";
if(mescroll.downProgressDom) mescroll.downProgressDom.classList.remove("mescroll-rotate");
},
outOffset: function(mescroll) {
console.log("down --> outOffset");
//下拉超过指定距离offset那一刻的回调
if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "释放更新";
},
onMoving: function(mescroll, rate, downHight) {
//下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离offset的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度
console.log("down --> onMoving --> mescroll.optDown.offset="+mescroll.optDown.offset+", downHight="+downHight+", rate="+rate);
if(mescroll.downProgressDom) {
var progress = * rate;
mescroll.downProgressDom.style.webkitTransform = "rotate(" + progress + "deg)";
mescroll.downProgressDom.style.transform = "rotate(" + progress + "deg)";
}
},
beforeLoading: function(mescroll, downwarp) {
console.log("down --> beforeLoading");
//准备触发下拉刷新的回调
return false; //如果要完全自定义下拉刷新,那么return true,此时将不再执行showLoading(),callback();
},
showLoading: function(mescroll) {
console.log("down --> showLoading");
//触发下拉刷新的回调
if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "加载中 ...";
if(mescroll.downProgressDom) mescroll.downProgressDom.classList.add("mescroll-rotate");
}
},
//上拉加载的所有配置项
up: {
use: true, //是否初始化上拉加载; 默认true
auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
isLock: false, //是否锁定上拉,默认false;当列表没有更多数据时会自动锁定不可上拉;在endSuccess如果检查到有下一页数据,则会自动解锁true
isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
callback: getRankingListUp, //上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
page: {
num: , //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: , //每页数据条数
time: null //加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
},
noMoreSize: , //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
offset: , //离底部的距离
resetShowDownScroll: false, //重置上拉加载数据,是否显示下拉的进度布局;默认false,默认显示上拉加载的进度布局;
toTop: {
//回到顶部按钮,需配置src才显示
src: "", //图片路径,默认null;
offset: , //列表滚动多少距离才显示回到顶部按钮,默认1000
warpClass: "mescroll-totop", //按钮样式,参见mescroll.min.css
showClass: "mescroll-fade-in", //显示样式,参见mescroll.min.css
hideClass: "mescroll-fade-out", //隐藏样式,参见mescroll.min.css
duration: //回到顶部的动画时长,默认300ms
},
loadFull: {
use: false, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
delay: //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
},
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;
warpId:'webGame', //父布局的id; 如果此项有值,将不使用clearEmptyId的值;
icon: null, //图标,默认null
tip: "暂无相关数据~", //提示
btntext: "", //按钮,默认""
btnClick: null, //点击按钮的回调,默认null
},
clearId: null, //加载第一页时需清空数据的列表id; 如果此项有值,将不使用clearEmptyId的值;
clearEmptyId: "", //相当于同时设置了clearId和empty.warpId; 简化写法;
hardwareClass: "mescroll-hardware", //硬件加速样式,动画更流畅,参见mescroll.min.css
warpClass: "mescroll-upwarp", //容器,装载布局内容,参见mescroll.min.css
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局
htmlNodata: '<p class="upwarp-nodata">更多精彩敬请期待</p>', //无数据的布局
inited: function(mescroll, upwarp) {
console.log("up --> inited");
//初始化完毕的回调,可缓存dom 比如 mescroll.upProgressDom = upwarp.getElementsByClassName("upwarp-progress")[0];
},
showLoading: function(mescroll, upwarp) {
console.log("up --> showLoading");
//上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染
upwarp.innerHTML = mescroll.optUp.htmlLoading;
},
showNoMore: function(mescroll, upwarp) {
console.log("up --> showNoMore");
//无更多数据
upwarp.innerHTML = mescroll.optUp.htmlNodata;
},
onScroll: function(mescroll, y){ //列表滑动监听,默认onScroll: null;
//y为列表当前滚动条的位置
console.log("up --> onScroll 列表当前滚动的距离 y = " + y);
},
scrollbar: {
use: isPC, //默认只在PC端自定义滚动条样式
barClass: "mescroll-bar"
}
}
});
return mescroll;
}

移动端上拉加载下拉刷新插件-mescroll.js插件的更多相关文章

  1. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  2. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  3. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  4. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  5. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  6. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  7. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  8. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

  9. SwipeRefreshLayout实现上拉加载下拉刷新

    package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...

随机推荐

  1. 51nod--1264 线段相交 (计算几何基础, 二维)

    题目: 1264 线段相交 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出平面上两条线段的两个端点,判断这两条线段是否相交(有一个公共点或有部分重合认为 ...

  2. spring jdbctemplate调用存储过程,返回list对象

    注:本文来源于<  spring jdbctemplate调用存储过程,返回list对象 > spring jdbctemplate调用存储过程,返回list对象 方法: /** * 调用 ...

  3. Confluence 6 升级自定义的站点和空间应用你的自定义布局

    当你升级你的 Confluence 到其他一个主要的 Confluence 发行版本的时候,你需要手动应用你修改过的任何全局或者空间级别的布局.除非有特殊的声明,针对一些非主要的 Confluence ...

  4. GIT的基本使用及应用场景

    一.什么是GIT? Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版本管理. GitHub.GitCafe.BitBucket和GitLab等是基于Git版本控制的远 ...

  5. Practical Web Penettation Testing (the first one Mutillidae 大黄蜂 之二)

    1.how  to use dpkg cmmand first it can be used for list all software , dpkg -l  (由于kali linux 没有启动所以 ...

  6. java web----MINA框架使用

    前期准备 1.下载 http://mina.apache.org/ 2.将依赖包添加到工程目录下(在工程目录下创建libs(directory目录)) 3.将 slf4j-api-1.7.26.jar ...

  7. mybatis常见错误总结

    1. 现象:mybatis xml文件中查询的返回类型写成list或java.util.List时,执行sql时报 java.lang.UnsupportedOperationException错误. ...

  8. base64解密

    问题 : base64解密 时间限制: 1 Sec  内存限制: 128 MB 题目描述 Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个 ...

  9. C++ Primer 笔记——顺序容器

    1.标准库中定义了一些顺序容器,所有顺序容器都提供了快速顺序访问元素的能力. 2.如果容器的元素类型没有默认构造函数,那么在构造这个容器的时候不能只指定这个容器的数目,因为没有办法默认构造这些元素. ...

  10. C++ 内链接 外链接

    编译的时候(假如编译器是VS),是以源文件cpp文件为单位,编译成一个个的obj文件,然后再通过链接器把不同的obj文件链接起来.如果一些变量或函数的定义是内连接的话,链接器链接的时候就不会拿它们去与 ...