MUI - 上拉刷新/下拉加载

新闻信息列表必备的功能,支持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>