开发APP时，很多时候都会用上，上拉加载数据，下拉刷新等功能，本文件介绍两种。

一种是原生APP自带的上拉加载，下拉刷新功能，一种是用JS 插件写的上拉加载，下拉刷新。

1.原生APP 的 上拉加载，下拉刷新，性能效果佳，体验好

它的使用方法，mui.js 已经把它封装起来，我们可以这样使用, down 是下拉刷新方法，up上拉加载方法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 :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

},

up : {

height:50,//可选.默认50.触发上拉加载拖动距离

auto:true,//可选,默认false.自动上拉加载一次

contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容

contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；

callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

}

}

});

下拉刷新: 只有一个方法可用，当刷新完毕，执行以下代码，停止刷新，恢复到原状。mui('#refreshContainer').pullRefresh().endPulldown();

上拉加载：常用4个方法mui('#refreshContainer').pullRefresh().disablePullupToRefresh(); //禁用上拉刷新,

mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉刷新

mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //结束上拉加载， false 代表还有数据可加载,true 代表已经没有更多数据了。

mui('#refreshContainer').pullRefresh().refresh(true); //重置上拉加载, 当上拉加载到没有更多数据时，已经不能上拉了，这时我们下载刷新数据时，就要重置上拉加载，才能又恢复上拉加载更多数据。

如果想禁止下拉刷新，可以这样做//禁止下拉刷新

plus.webview.currentWebview().setPullToRefresh({support:false});

//开启下拉刷新

plus.webview.currentWebview().setPullToRefresh({support:true,style:"circle"});

例子：可以在 MUI 项目里找到,点击预览下拉刷新

2. 是通过JS插件写的上拉加载，下拉刷新功能，性能差些，在些低端机里，可能会出现下拉转圈抖动现象。

它的使用方法，在页面里引用这两个JS文件，这两个文件在哪里呢，在MUI项目工程包里，JS文件夹下面。

它的优势是，可以在同一个页面，实例化多个 下拉刷新，上拉加载，可以区域刷新等等。

基础代码mui("#pullRefresh").pullToRefresh({

down:{

callback:function()

{

//下拉刷新

}

},

up:{

show:false,

contentrefresh:"加载中...",

contentnomore:"没有更多数据了",

callback: function()

{

//上拉加载

});

下拉刷新：2个 方法mui("#pullRefresh").pullToRefresh().endPullDownToRefresh(); //结束下拉刷新

mui("#pullRefresh").pullToRefresh().pullDownLoading(); //执行该方法, 就自动执行下拉刷新一次

上拉加载：2个 方法mui("#pullRefresh").pullToRefresh().endPullUpToRefresh(true);  //true 代表没有更多数据了，false 代表还可以继续加载更多数据

mui("#pullRefresh").pullToRefresh().refresh(true); //重置上拉加载， 当重新下拉刷新数据时，就要重新重置下，才可继续上拉加载更多数据

例子：可以在 MUI 项目里找到 "选项卡+下拉刷新"