mui 上拉刷新加載template數據

 

html沒什麼好說的,就是主要刷新列表要套多套一層,要不動畫會不見

//待刷新區域

<div id="cx_lst" style="margin-top: 30px;">
<div id="cx_lst2">

</div>
</div>

 

//臨時數組
var cx = [{
"ypmc": "11",
"jg": 100,
"id": "1",

}, {
"ypmc": "22",
"jg": 200,
"id": "2",

}, {
"ypmc": "33",
"jg": 300,
"id": "3",

}, {
"ypmc": "44",
"jg": 400,
"id": "4",

}, {
"ypmc": "55",
"jg": 500,
"id": "5",

}, {
"ypmc": "66",
"jg": 600,
"id": "6",

}]

 

//刷新模板
var cxTemplate = '<%for(var i=0;i<arr.length;i=i+2){%>' +

'<ul class="mui-table-view mui-grid-view" style="text-align: center;">' +

'<li class="mui-table-view-cell mui-media mui-col-xs-5 cx_list" id="<%=arr[i].id%>";>' +

'<img class="mui-media-object" src="../../images/merchandise.jpg">' +

'<div class="mui-media-body"><%=arr[i].ypmc%></div>' +
'<div class="mui-media-body" style="color: red;">¥<span><%=arr[i].jg%></span></div>' +

'</li>' +
'<li class="mui-table-view-cell mui-media mui-col-xs-5 cx_list" id="<%=arr[i+1].id%>">' +

'<img class="mui-media-object" src="../../images/merchandise.jpg">' +

'<div class="mui-media-body"><%=arr[i+1].ypmc%></div>' +
'<div class="mui-media-body" style="color: red;">¥<span><%=arr[i+1].jg%></span></div>' +

'</li>' +

'</ul>' +

'<%}%>';

//初始化參數

mui.init({
pullRefresh: {
container: '#cx_lst', //待刷新區域標識

up: {
height:50,
contentrefresh: '正在加載...',
contentnomove:'沒有更多數據了',
callback: pullupRefresh
}
}
});

 

 

var count = 0;//刷新次數
var currentLiEventIndex = 0; //目前加載的數據量

/**
* 上拉加載具體業務實現
*/
function pullupRefresh() {
//當前已經加載的商品數量
var ls = document.getElementsByClassName('cx_list');

//函數在指定時間後返回結果
setTimeout(function() {
//促銷商品數量
var cxNum=cx.length;
//每次加載2個商品,總共刷新次數
var upRefreshCount=parseInt(cxNum/2);
//alert(upRefreshCount+"=====刷新次數")
mui('#cx_lst').pullRefresh().endPullupToRefresh((++count>upRefreshCount)); //結果爲true表明沒有更多數據了。

//數據加載函數
getAllCxLimit(currentLiEventIndex, 1); 


}, 1500);
}

 

 

//獲取促銷商品列表
function getAllCxLimit(str,end){
var data = {
arr: [],
}
data.arr=cx;//將數據保存在數組中
data.arr=data.arr.slice(str, str+end+1);//截取數組已經加載的+須要加載的

var render = template.compile(cxTemplate); // 初始化刷新列表 
var sHtml = render(data); //將數據導入刷新列表
document.getElementById('cx_lst2').innerHTML = document.getElementById('cx_lst2').innerHTML+sHtml; //寫入數據
currentLiEventIndex=currentLiEventIndex+2;//目前數據加載的數量
}

 

//商品列表點擊事件,進入商品詳情頁mui('#cx_lst').on('tap', '.cx_list', function() { var cx=document.getElementsByClassName('cx_list'); alert(this.getAttribute('id') + "商品參數id,打開新頁面");});