mescroll api 汇总

// 初始化mescroll
function initmescroll() {
//创建mescroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
//是否为ios设备;
var isios = !!navigator.uragent.match(/(i[^;]+;( u;) cpu.+mac os x/); //ios终端
//是否为pc端,如果是scrollbar端,默认自定义滚动条
var ispc = typeof window.orientation == ‘undefined’ ;
var mescroll = new mescroll(“mescroll”, {
//下拉刷新的所有配置项
down:{
u: true, //是否初始化下拉刷新; 默认true
auto: fal, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
autoshowloading: true, //如果在初始化完毕之后自动执行下拉回调,是否显示下拉刷新进度; 默认fal
islock: fal, //是否锁定下拉,默认fal;
isboth: fal, //下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认fal,两者不可同时触发;
callback: function(mescroll) {
//加载轮播数据
getrankinglistdown();
//下拉刷新的回调,默认重置上拉加载列表为第一页
// mescroll.retupscroll();
},
offt: 60, //触发刷新的距离,默认80
outofftrate: 0.2, //超过指定距离范围外时,改变下拉区域高度比例;小于1,越往下拉高度变化越小;
musttotop: !isios, //是否列表必须滑动到顶部才能下拉;因为列表回弹效果(补充养老保险是什么-webkit-overflow-scrolling:touch)是ios专属样式,所以ios默认fal,其他为true;
hardwareclass: “mescroll-hardware”, //硬件加速样式;解决ios下拉因隐藏进度条而闪屏的问题,参见mescroll.min.css
warpclass: “mescroll-downwarp”, //容器,装载布局内容,参见mescroll.min.css
retclass: “mescroll-downwarp-ret”, //高度重置的动画,参见mescroll.min.css
htmlcontent: ‘

下拉刷新

‘, //布局内容

inited: function(mescroll, downwarp) {

console.log(“down –> inited”);

//初始化完毕的回调,可缓存dom

mescroll.downtipdom = downwarp.getelementsbyclassname(“downwarp-tip”)[0];

mescroll.downprogressdom = downwarp.getelementsbyclassname(“downwarp-progress”)[0];
null错误
},

inofft: function(mescroll) {

console.log(“down –> inofft”);

//进入指定距离offt范围内那一刻的回调

if(mescroll.downtipdom) mescroll.downtipdom.innerhtml = “下拉刷新”;

if(mescroll.downprogressdom) mescroll.downprogressdom.classlist.remove(“mescroll-rotate”);

},

outofft: function(mescroll) {

console.log(“down –> outofft”);

//下拉超过指定距离offt那一刻的回调

if(me钩吾山scroll.downtipdom) mescroll.downtipdom.innerhtml = “释放更新”;

},

onmoving: function(mescroll, rate, downhight) {

//下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离offt的比值(inofft: rate<1; outofft: rate>=1); downhight当前下拉区域的高度

console.log(“down –> onmoving –> mescroll.optdown.offt=”+mescroll.optdown.offt+”, downhight=”+downhight+”, rate=”+rate);

if(mescroll.downprogressdom) {

var progress = 360 * rate;

mescroll.downprogressdom.style.webkittransform = “rotate(” + progress + “deg)”;

mescroll.downprogressdom.style.transform = “rotate(” + progress + “deg)”;

}

},

beforeloading: function(mescroll, downwarp) {

console.log(“down –> beforeloading”);

//准备触发下拉刷新的回调

return fal; //如果要完全自定义下拉刷新,那么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: {

u: true, //是否初始化上拉加载; 默认true

auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认fal

islock: fal, //是否锁定上拉,默认fal;当列表没有更多数据时会自动锁定不可上拉;在endsuccess如果检查到有下一页数据,则会自动解锁true

isboth: fal, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认fal,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;

callback: getrankinglistup, //上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getlistdata(page); }

page: {

num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始

size: 12, //每页数据条数

time: null //加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;

},

nomoresize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看

offt: 100, //离底部的距离

retshowdownscroll: fal, //重置上拉加载数据,是否显示下拉的进度布局;默认fal,默认显示上拉加载的进度布局;

totop: {

//回到顶部按钮,需配置src才显示

src: “”, //图片路径,默认null;

offt: 1000, //列表滚动多少距离才显示回到顶部按钮,默认1000

warpclass: “mescroll-totop”, //按钮样式,参见mescroll.min.css

showclass: “mescroll-fade-in”, //显示样式,参见mescroll.min.css

hideclass: “mescroll-fade-out”, //隐藏样式,参见mescroll.min.css

duration: 300 //回到顶部的动画时长,默认300ms

},

loadfull: {

u: fal, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认fal,因为可通过调高page.size避免这个情况

delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;

},

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: ‘

加载中..

‘, //上拉加载中的布局

htmlnodata: ‘

更多精彩敬请期待

‘, //无数据的布局

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为列表当前滚动条的位置

co600字议论文nsole.log(“up –> onscroll 列表当前滚动的距离 y = ” + y);

},

scrollbar: {

u: ispc, //默认只在pc端自定义滚动条样式

barclass: “mescroll-bar”

}

}

});

return mescroll;

}