mui的下拉刷新和上拉加载
Posted bber
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mui的下拉刷新和上拉加载相关的知识,希望对你有一定的参考价值。
代码定义:
var refresh = function(){
mui.init({
pullRefresh : {
container:‘#refreshContainer‘,//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down : {
height:50,//可选,默认50.触发下拉刷新拖动距离,
auto: false,//可选,默认false.自动下拉刷新一次
contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback : function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据
/*
...
clock_data.content();
*/
mui(‘#refreshContainer‘).pullRefresh().refresh(true);
mui(‘#refreshContainer‘).pullRefresh().endPulldownToRefresh();
}
},
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:false,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
//contentnomore:‘没有更多数据了‘,//可选,请求完毕若没有更多数据时显示的提醒内容;
callback : function(){ //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
/*...*/
mui(‘#refreshContainer‘).pullRefresh().refresh(true);
mui(‘#refreshContainer‘).pullRefresh().endPullupToRefresh();
}
}
}
});
}
//执行
refresh ();
1、下拉刷新
mui.init({
pullRefresh : {
container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down : {
style:‘circle‘,//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
color:‘#2BD009‘, //可选,默认“#2BD009” 下拉刷新控件颜色
height:‘50px‘,//可选,默认50px.下拉刷新控件的高度,
range:‘100px‘, //可选 默认100px,控件可下拉拖拽的范围
offset:‘0px‘, //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
callback :function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
刷新比较简单,在一个页面中的不同类目之间,在上拉之后到另一个类目时,可以执行
mui(‘#pullrefresh‘).pullRefresh().scrollTo(0,0,0)
使滚动列表跳到顶部。
2、上拉加载
mui.init({
pullRefresh : {
container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:‘没有更多数据了‘,//可选,请求完毕若没有更多数据时显示的提醒内容;
callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
(1)加载完新数据后,是否还有更多数据;若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语。
mui(‘#refreshContainer‘).pullRefresh().endPullupToRefresh(false);
(2)在一个页面的不同类目之间切换时,特别是在经过上拉加载之后,重置加载尤为重要,否则可能将出现上拉不动的bug:
mui(‘#
refreshContainer‘).pullRefresh().refresh(true);
补充:
1.禁用上拉加载:mui(‘#refreshContainer‘).pullRefresh().disablePullupToRefresh();
2.启用上拉加载:mui(‘#refreshContainer‘).pullRefresh().enablePullupToRefresh();
以上是关于mui的下拉刷新和上拉加载的主要内容,如果未能解决你的问题,请参考以下文章
Android 使用SwipeRefreshLayout实现RecyclerVeiw的下拉刷新和上拉加载
Android实战----RecyclerView下拉刷新和上拉加载的简单实现
Android实战----RecyclerView下拉刷新和上拉加载的简单实现