官网地址是: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. python学习第9-10天,函数。

    函数初识 为什么要使用函数? 函数最重要的目的是方便我们重复使用相同的一段程序. 将一些操作隶属于一个函数,以后你想实现相同的操作的时候,只用调用函数名就可以,而不需要重复敲所有的语句. 函数的定义与 ...

  2. Python Redis pipeline操作

    Redis是建立在TCP协议基础上的CS架构,客户端client对redis server采取请求响应的方式交互. 一般来说客户端从提交请求到得到服务器相应,需要传送两个tcp报文. 设想这样的一个场 ...

  3. JQery插件zClip ----实现粘贴复制功能

    使用了这个插件,但是用在table,td中话,我是一个列表来的,对此使用此插件还是有点问题的?点击其中的一个会全部都被选中. <script type="text/javascript ...

  4. MySQL跟踪SQL执行之开启慢查询日志

      查询慢查询相关参数   show variables like '%quer%';   slow_query_log(是否记录慢查询)   slow_query_log_file(慢日志文件路径) ...

  5. 玩转EhCache之最简单的缓存框架

    二.主要特性 快速: 简单: 多种缓存策略: 缓存数据有两级:内存和磁盘,因此无需担心容量问题: 缓存数据会在虚拟机重启的过程中写入磁盘: 可以通过 RMI.可插入 API 等方式进行分布式缓存: 具 ...

  6. Winform中的TextBox的小技巧

    1  一些常用属性this.textBox5.PasswordChar = '@';  //密码的样式            this.textBox5.UseSystemPasswordChar = ...

  7. C# Winform控件对透明图片重叠时导致图片不透明的解决方法(转)

    在Winform中如果将一个透明图片放在窗体上能正常显示透明,但是如果将该图片放在另一个控件上会导致不能显示透明效果. 解决这种情况,可以采取在控件上使用GDI+绘画出透明图片. 这里我们就以一个pi ...

  8. Confluence 6 内存使用和需求和一些问题

    系统备份和恢复 Confluence  的备份和恢复是与数据库中数据量的大小有关.这个操作可能会对 Confluence 的性能产生很多关键性的影响并且大量消耗内存.如果你在 Confluence 的 ...

  9. Swift 设置某个对象的normal 属性找不到normal 解决方案

    normal  等价于 UIControlState(rawValue: 0)

  10. Python基础之函数二

    函数的嵌套 通过名字就能理解,函数里是还可以套着函数用的.这么牛,下面就来看看几段代码,看看是怎么回事.注意:函数一定是先定义后使用. x=1234 def f1(): #定义一个主函数 x = 1 ...