MUI - 上拉刷新/下拉加载

Posted 2020-06-29

新闻信息列表必备的功能,支持Table，Ul等列表.

 

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


<script type="text/javascript">
  mui.init
  ({
    pullRefresh: 
    {
      container: ‘#pullrefresh‘,
      down: {
        callback: pulldownRefresh
      },
      up: {
        contentrefresh: ‘正在加载...‘,
        callback: pullupRefresh
      }
    }
  });
      
  /*
   * 下拉刷新具体业务实现
   */
  function pulldownRefresh() 
  {
    setTimeout(function() 
    {
      var table = document.body.querySelector(‘.mui-table-view‘);
      var cells = document.body.querySelectorAll(‘.mui-table-view-cell‘);
      //模拟数据
      for (var i = cells.length, len = i + 3; i < len; i++) {
        var li = document.createElement(‘li‘);
        li.className = ‘mui-table-view-cell‘;
        li.innerhtml = ‘<a class="mui-navigate-right">Item ‘ + (i + 1) + ‘</a>‘;
        //下拉刷新，新纪录插到最前面；
        table.insertBefore(li, table.firstChild);
      }
      
      mui(‘#pullrefresh‘).pullRefresh().endPulldownToRefresh(); //refresh completed
    }, 1500);
  }
      
  var count = 0;
  /*
   * 上拉加载具体业务实现
   */
  function pullupRefresh() 
  {
    setTimeout(function() {
      mui(‘#pullrefresh‘).pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
      var table = document.body.querySelector(‘.mui-table-view‘);
      var cells = document.body.querySelectorAll(‘.mui-table-view-cell‘);
      
      for (var i = cells.length, len = i + 20; i < len; i++) {
        var li = document.createElement(‘li‘);
        li.className = ‘mui-table-view-cell‘;
        li.innerHTML = ‘<a class="mui-navigate-right">Item ‘ + (i + 1) + ‘</a>‘;
        table.appendChild(li);
      }
      
    }, 1500);
  }
      
      
      
  if (mui.os.plus) {
    mui.plusReady(function() {
      setTimeout(function() {
        mui(‘#pullrefresh‘).pullRefresh().pullupLoading();
      }, 1000);

    });
  } else 
  { 
    mui.ready(function() {
      mui(‘#pullrefresh‘).pullRefresh().pullupLoading();
    });
  }
</script>