MUI框架学习之[Ajax][下拉刷新][上拉加载]

Ajax

mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型； 本着极简的设计原则，mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

mui.ajax( url[,settings])
url Type: String 请求发送的目标地址
settings Type:PlainObject key/value格式的json对象，用来配置ajax请求参数，支持的完整参数参考如下mui.ajax([settings])方法

mui.ajax([settings])
settings Type: PlainObject key/value格式的json对象，用来配置ajax请求参数，支持的详细参数如下：
async Type: Boolean 发送同步请求
crossDomain Type: Boolean 强制使用5+跨域
data Type: PlainObject 或 String 发送到服务器的业务数据
dataType Type: String 预期服务器返回的数据类型；如果不指定，mui将自动根据Http包的MIME头信息自动判断；支持设置的dataType可选值：
“xml”: 返回XML文档
“html”: 返回纯文本HTML信息；
“script”: 返回纯文本JavaScript代码
“json”: 返回JSON数据
“text”: 返回纯文本字符串
error Type: Functon（XMLHttpRequest xhr,String type,String errorThrown） 请求失败时触发的回调函数，该函数接收三个参数：
xhr：xhr实例对象
type：错误描述，可取值：”timeout”,“error”,“abort”,”parsererror”、”null”
errorThrown：可捕获的异常对象
success Type: Functon（Anything data,String textStatus,XMLHttpRequest xhr） 请求成功时触发的回调函数，该函数接收三个参数：
data：服务器返回的响应数据，类型可以是json对象、xml对象、字符串等；
textStatus：状态描述，默认值为’success’
xhr：xhr实例对象
timeout Type: Number 请求超时时间（毫秒），默认值为0，表示永不超时；若超过设置的超时时间(非0的情况)，依然未收到服务器响应，则触发error回调
type Type: String 请求方式，目前仅支持’GET’和’POST’，默认为’GET’方式
headers Type: Json 指定HTTP请求的Header headers:{'Content-Type':'application/json'}
processData Type: Boolean 为了匹配默认的content-type（"application/x-www-form-urlencoded"）， mui默认会将data参数中传入的非字符串类型的数据转变为key1=value&key2=value2格式的查询串； 如果业务需要，希望发送其它格式的数据（比如Document对象），可以设置processData为false

代码示例：如下为通过post方式向某服务器发送鉴权登录的代码片段

mui.ajax('http://server-name/login.PHP',{
    data:{
        username:'username',password:'password'
    },dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒；
    headers:{'Content-Type':'application/json'},success:function(data){
        //服务器返回响应，根据响应结果，分析是否登录成功；
        ...
    },error:function(xhr,type,errorThrown){
        //异常处理；
        console.log(type);
    }
});

mui.post()方法是对mui.ajax()的一个简化方法，直接使用POST请求方式向服务器发送数据、且不处理timeout和异常（若需处理异常及超时，请使用mui.ajax()方法），使用方法： mui.post(url[,data][,success][,dataType])，如上登录鉴权代码换成mui.post()后，代码更为简洁，如下：

mui.post('http://server-name/login.PHP',{
        username:'username',function(data){
        //服务器返回响应，根据响应结果，分析是否登录成功；
        ...
    },'json'
);

mui.get()方法和mui.post()方法类似，只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常（若需处理异常及超时，请使用mui.ajax()方法），使用方法： mui.get(url[,dataType])，如下为获得某服务器新闻列表的代码片段，服务器以json格式返回数据列表:

mui.get('http://server-name/list.PHP',{category:'news'},function(data){
        //获得服务器响应
        ...
    },'json'
);

如上mui.get()方法和如下mui.ajax()方法效果是一致的：

mui.ajax('http://server-name/list.PHP',{
    data:{
        category:'news'
    },//服务器返回json格式数据
    type:'get',//HTTP请求类型
    success:function(data){
        //获得服务器响应
        ...
    }
});

mui.getJSON()方法是在mui.get()方法基础上的更进一步简化，限定返回json格式的数据，其它参数和mui.get()方法一致，使用方法： mui.get(url[,success])，如上获得新闻列表的代码换成mui.getJSON()方法后，更为简洁，如下：

mui.getJSON('http://server-name/list.PHP',function(data){
        //获得服务器响应
        ...
    }
);

问答社区话题讨论： Ajax

下拉刷新

为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。两个平台实现虽有差异，但mui经过封装，可使用一套代码实现下拉刷新。

主页面内容比较简单，只需要创建子页面即可：

mui.init({
    subpages:[{
      url:pullrefresh-subpage-url,//下拉刷新内容页面地址
      id:pullrefresh-subpage-id,//内容页面标志
      styles:{
        top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px；
        .....//其它参数定义
      }
    }] });

或者可以这样:

mui.init({});
var sub_style = {
    top: '45px',bottom: '0px'
};
mui.plusReady(function() {
    var self = plus.webview.currentWebview();
    var sub = plus.webview.create("ninth.html","ninth",sub_style);
    self.append(sub);
});

iOS平台的下拉刷新，使用的是mui封装的区域滚动组件， 为保证两个平台的DOM结构一致，内容页面需统一按照如下DOM结构构建：

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">

    </ul>
  </div>
</div>

在内容页面,可以通过mui.init方法中pullRefresh参数配置下拉刷新各项参数，如下：

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    down : {
      height:50,//可选,默认50.触发下拉刷新拖动距离,
      auto: true,默认false.自动下拉刷新一次
      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    }
  }
});

下拉刷新是mui框架的一个插件，该插件目前有下拉刷新结束、滚动到特定位置两个方法；

下拉刷新结束

在下拉刷新过程中，当获取新数据后，需要执行endPulldownToRefresh方法， 该方法的作用是关闭“正在刷新”的雪花进度提示，内容区域回滚顶部位置，如下：

function pullfresh-function() {
     //业务逻辑代码，比如通过ajax从服务器获取新数据；
     ......
     //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
     mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
}

滚动到特定位置

下拉刷新组件滚动到特定位置的方法类似区域滚动组件

scrollTo( xpos,ypos [,duration] )
xpos Type: Integer 要在窗口文档显示区左上角显示的文档的 x 坐标
ypos Type: Integer 要在窗口文档显示区左上角显示的文档的 y 坐标
duration Type: Integer 滚动时间周期，单位是毫秒

示例：在hello mui下拉刷新示例中，实现了双击标题栏，让列表快速回滚到顶
部的功能；代码如下：

var contentWebview = null;
//监听标题栏的双击事件
document.querySelector('header').addEventListener('doubletap',function () {
    if(contentWebview==null){
        contentWebview = plus.webview.currentWebview().children()[0];
    }
    //内容区滚动到顶部
    contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,100)");
});

更改下拉刷新文字位置

可以解决修改下拉刷新子页面默认top值后,下拉刷新提示框位置异常问题

根据实际需求在父页面给mui-content设置top属性

.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
  top: 180px !important;
}

问答社区话题讨论： 下拉刷新

上拉加载

概述

mui的上拉加载和下拉刷新类似，都属于pullRefresh插件，使用过程如下：

1. 页面滚动到底，显示“正在加载…”提示（mui框架提供）
2. 执行加载业务数据逻辑（开发者提供）
3. 加载完毕，隐藏”正在加载”提示（mui框架提供）

开发者只需关心业务逻辑，实现加载更多数据即可。

初始化

初始化方法类似下拉刷新，通过mui.init方法中pullRefresh参数配置上拉加载各项参数，如下：

mui.init({
  pullRefresh : {
    container:refreshContainer,//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
    up : {
      height:50,//可选.默认50.触发上拉加载拖动距离
      auto:true,默认false.自动上拉加载一次
      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } } });

结束上拉加载

加载完新数据后，需要执行endPullupToRefresh()方法，结束转雪花进度条的“正在加载…”过程

.endPullupToRefresh( nomore )
nomore Type: Boolean 是否还有更多数据；若还有更多数据，则传入false; 否则传入true，之后滚动条滚动到底时，将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语

示例：

function pullfresh-function() {
     //业务逻辑代码，比如通过ajax从服务器获取新数据；
     ......
     //注意：
     //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
     //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
     this.endPullupToRefresh(true|false);
}

重置上拉加载

若部分业务中，有重新触发上拉加载的需求（比如当前类别已无更多数据，但切换到另外一个类别后，应支持继续上拉加载），此时调用.refresh(true)方法，可重置上拉加载控件，如下代码：

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
//注意：refresh()中需传入true
mui('#pullup-container').pullRefresh().refresh(true);

禁用上拉刷新

在部分场景下希望禁用上拉加载，比如在列表数据过少时，不想显示“上拉显示更多”、“没有更多数据”的提示语，开发者可以通过调用disablePullupToRefresh()方法实现类似需求，代码如下：

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
mui('#pullup-container').pullRefresh().disablePullupToRefresh();

启用上拉刷新

使用disablePullupToRefresh()方法禁用上拉加载后，可通过enablePullupToRefresh()方法再次启用上拉加载，代码如下：

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
mui('#pullup-container').pullRefresh().enablePullupToRefresh();

1. 上拉加载时，怎么隐藏底部的“没有更多数据了”?
2. 问答社区话题讨论：上拉加载