mui上拉刷新下拉加载

Dear 丶 2021-09-15 16:48 440阅读 0赞

废话不多说，直接上代码

1、容器

<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>

2、通过 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-down, //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

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

\},

up : { //上拉
          height:50,//可选.默认50.触发上拉加载拖动距离
          auto:true,//可选,默认false.自动上拉加载一次
          contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
          callback :pullfresh-function-up,

auto: true,//可选,默认false.首次加载自动下拉刷新一次

`//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； }`\}\});

下拉刷新加载完新数据前，需要执行page=1，将加载页面重置为1过程

function pullfresh-function-up() {
         //业务逻辑代码，比如通过ajax从服务器获取新数据；
            page=1；
         //将容器ul内容清空在重新请求数据 
     }

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

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