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