码迷,mamicode.com
首页 > 其他好文 > 详细

MUI - 上拉刷新/下拉加载

时间:2016-03-26 23:52:30      阅读:14359      评论:0      收藏:0      [点我收藏+]

标签:

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

 

MUI - 上拉刷新/下拉加载

标签:

原文地址:http://www.cnblogs.com/CyLee/p/5324224.html

(22)
(5)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!