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