mui實現移動端上拉載入下拉重新整理功能

標籤：拖拽   select   方法   控制項   參數   container   creat   class   ati   

移動端上拉載入下拉重新整理功能是必不可少運用非常頻繁的

mui架構實現方法

引入mui負載檔案

<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>

html:

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
　　<div class="mui-scroll">
　　　　<!--資料列表-->
　　　　<ul class="mui-table-view">
　　　　<li class="mui-table-view-cell">data</li>
　　　　<li class="mui-table-view-cell">data</li>
　　　　</ul>
　　</div>
</div>

 

js:

<script type="text/javascript" charset="utf-8">
　　mui.init({
　　pullRefresh: {
　　　　container: ‘#pullrefresh‘,//要操作的容器，可選擇到的都行，#Id,.Class都行
　　　　down: {
　　　　　　style:‘circle‘,
　　　　　　color:‘#2BD009‘, //可選，預設“#2BD009” 下拉重新整理控制項顏色
　　　　　　height:‘150px‘,//可選,預設50px.下拉重新整理控制項的高度,
　　　　　　range:‘100px‘, //可選 預設100px,控制項可下拉拖拽的範圍
　　　　　　offset:‘0‘, //可選 預設0px,下拉重新整理控制項的起始位置
　　　　　　auto: false,//可選,預設false.首次載入自動上拉重新整理一次
　　　　　　callback: pulldownRefresh
　　　　},
　　　　up: {
　　　　　　contentrefresh: ‘正在載入...‘,//下拉時顯示的文本
　　　　　　callback: pullupRefresh
　　　　}
　　}
});

/**
* 下拉重新整理具體業務實現
*/
function pulldownRefresh() {
　　setTimeout(function() {
　　　　mui(‘#pullrefresh‘).pullRefresh().endPulldownToRefresh(); //refresh completed
　　}, 1500);
}
var count = 0;

/**
* 上拉載入具體業務實現
*/
function pullupRefresh() {
　　setTimeout(function() {
　　　　mui(‘#pullrefresh‘).pullRefresh().endPullupToRefresh((++count > 4)); //參數為true代表沒有更多資料了。
　　　　var table = document.body.querySelector(‘.mui-table-view‘);
　　　　var cells = document.body.querySelectorAll(‘.mui-table-view-cell‘);
　　　　var newCount = cells.length>0?5:20;　　//首次載入20條，滿屏
　　　　for (var i = cells.length, len = i + newCount; 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);
}

</script>

 

下拉重新整理

上拉載入

mui實現移動端上拉載入下拉重新整理功能