MUI - 上拉刷新/下拉加载
时间:2016-03-26 23:52:30
收藏:0
阅读:14359
新闻信息列表必备的功能,支持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>
评论(0)