mui提供了初始化一个下拉刷新控件的方法
mui.init({
pullRefresh: {
container: "#scroll1",
down: {
height: 50,
auto: false,
contentdown: "下拉可以刷新",
contentover: "释放立即刷新",
contentrefresh: "正在刷新.....",
callback: getNewList
// style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
// color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
// height: '50px', //可选,默认50px.下拉刷新控件的高度,
// range: '100px', //可选 默认100px,控件可下拉拖拽的范围
// offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
// auto: true, //可选,默认false.首次加载自动上拉刷新一次
// callback: getNewList //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
up: {
// height: 50, //可选.默认50.触发上拉加载拖动距离
// auto: false, //可选,默认false.自动上拉加载一次
// contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
// contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
// callback: getListPyPage //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
mui会自动判断手机系统,如果是iOS系统,就采用div的下拉刷新,如果是安卓系统,就采用双webveiew的方式,但是div模式的下拉刷新可以满足不同位置的需求,我之前的文章里面也有提到,安卓端强制使用下拉刷新方案,是通过修改mui.js源码来实现的
当一个页面有多个选项卡对应有多个div的下拉刷新容器时,我们会发现,上面的代码不能用了,多个下拉刷新只有一个能生效,因为mui.init的时候初始化了,后面再用同样的套路init出下拉刷新容器,只会把之前的容器顶掉,让后面的生效。
这个时候就不能采用mui.init的方式来创建下拉刷新控件了,要对每个要刷新的容器都设置一遍,代码如下
mui("#scroll1").pullRefresh({
down: {
height: 50,
auto: false,
contentdown: "下拉可以刷新",
contentover: "释放立即刷新",
contentrefresh: "正在刷新.....",
callback: getNewList
// style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
// color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
// height: '50px', //可选,默认50px.下拉刷新控件的高度,
// range: '100px', //可选 默认100px,控件可下拉拖拽的范围
// offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
// auto: true, //可选,默认false.首次加载自动上拉刷新一次
// callback: getNewList //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
});
用mui自带的选择器选中一个容器后去初始化一个下拉刷新控件,这样就不用在下拉刷新控件里面设置容器了。
在这上面用的是mui.js这个文件,并没有用到mui额外提供的插件
如果用的是mui.pollToRefresh.js这个插件,要修改mui.pollToRefresh.js源码
具体修改方法已经有大神给出
http://ask.dcloud.net.cn/article/563