mui上拉刷新下拉加载-蒲公英云

mui上拉刷新下拉加载

Dear 丶 2021-09-15 16:48 533阅读 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);
}