APP 上拉加载，下拉刷新 介绍

开发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文件夹下面。

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

<script src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js"></script>

 基础代码

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 项目里找到 "选项卡+下拉刷新"