mui. 下拉刷新 php,MUI填坑记-8同一个页面多个div下拉刷新

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