mui 上拉刷新加载template数据

标签：取数   ntb   end   商品   数据   上拉加载   center   body   for   

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,打开新页面");
});

mui 上拉刷新加载template数据

标签：取数   ntb   end   商品   数据   上拉加载   center   body   for   

原文地址：http://www.cnblogs.com/tjwrth-juglans/p/7519690.html