首页 > 代码库 > MUI实现上拉刷新和下拉加载

MUI实现上拉刷新和下拉加载

  前  言

ha ha

 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。

 mui的上拉加载和下拉刷新类似,都属于pullRefresh插件。

 

上拉刷新

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

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

通过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框架的一个插件,该插件目前有下拉刷新结束、滚动到特定位置两个方法;

 

1下拉刷新结束

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

 

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

 

2滚动到特定位置

 在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,0,100)");
});

 

3更改下拉刷新文字位置

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

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

 

下拉加载

 

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

  • 1、页面滚动到底,显示“正在加载...”提示(mui框架提供)
  • 2、执行加载业务数据逻辑(开发者提供)
  • 3、加载完毕,隐藏"正在加载"提示(mui框架提供)

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

 

1初始化

 初始化方法类似下拉刷新,通过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从服务器获取新数据;
    }
  }
});

 

2结束上拉加载

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

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

 

3重置上拉加载

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

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

 

4禁用上拉刷新

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

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

 

5启用上拉刷新

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

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

 

MUI实现上拉刷新和下拉加载