jQuery实现手机版页面翻页效果的简单实例
如下所示：
varpage=1;
varsize=6;
varmark=0;
varurl="{pigcms{:U('Order/index',array('page'=>'d%'))}";
varcommentTpl='<divstyle="margin-top:10px">\
<buttondata-oid="<order_id>"style="width:65px;height:20px;z-index:999;"onclick="comment()">去评价</button>\
</div>';
vartemplate='<liclass="item-order-li">\
<aclass="item-shop"href="{Pigcms{:U('Store/shop',array("store_id"=>"<store_id>"))}">\
<iclass="shop-icon"></i>\
<spanclass="shop-name">{store_name}</span>\
<iclass="enter-icon"></i>\
</a>\
<divclass="item-order"data-node="item-order"data-oid="<order_id>"data-status="0">\
<astyle="z-index:0;"href="{pigcms{:U('Order/status',array("order_id"=>"<order_id>"))}">\
<divclass="list-img"><imgclass="lazy-load"src="{pic_info}"></div>\
<divclass="list-content">\
<divclass="order-detail">\
<pclass="time">{create_time}</p>\
<pclass="desc">总价：￥{discount_price}</p>\
</div>\
<divclass="order-content-rt">\
<divclass="order-status">{state}{comment_tpl}</div>\
</div>\
</div></a>\
</div>\
</li>';
varemptyTpl='<divid="refund-widget-list"class="refund-widget-list">\
<ulclass="refundlist"data-node="refundList">\
<divclass="no-result">\
<figure></figure>\
<p>暂无订单</p>\
</div>\
</ul>\
</div>';
functiongetList(){
if(mark){
returnfalse;
}
mark=1;
varrequestUrl=url.replace(/d%/,page);
$("#page-loader").show();
$.get(requestUrl,function(json){
if(json.num>0){
render(json.list);
$("#page-loader").hide();
page=page+1;
}elseif(json.num<=0&&page==1){
$(".order-list").html(emptyTpl);
}
if(json.num>=size){
mark=0;
}
$("#page-loader").hide();
},'json');
}
functionrender(data){
for(vari=0,item;item=data[i++];){
varhtml=template;
if(item['comment_status']==0&&item['order_status']==1){
item['comment_tpl']=commentTpl.replace(newRegExp('<order_id>',"gm"),item['order_id']);
}elseif(item['comment_status']==1&&item['order_status']==1){
item['comment_tpl']='<divstyle="margin-top:10px"><spanstyle="width:55px;height:20px;">已评价</span></div>';
}else{
item['comment_tpl']='<divstyle="margin-top:10px"><spanstyle="width:55px;height:20px;"></span></div>';
}
switch(item['order_status']){
case'0':item['state']='订单失效';break
case'1':item['state']='订单完成';break
case'2':item['state']='商家未确认';break
case'3':item['state']='商家已确认';break
case'4':item['state']='已取餐';break
case'5':item['state']='正在配送';break
case'6':item['state']='退单';break
case'7':item['state']='商家取消订单';break
case'8':item['state']='配送员已接单';break
}
html=html.replace(newRegExp('<order_id>',"gm"),item['order_id']);
html=html.replace(newRegExp('<store_id>',"gm"),item['store_id']);
for(varkeyinitem){
html=html.replace(newRegExp('{'+key+'}',"gm"),item[key]);
}
$(".order-list").append(html);
}
}
getList();
functioncomment(e){
e=e||window.event;
e.stopPropagation();
e.preventDefault();
varoid=$("button").attr("data-oid");
location.href="{pigcms{:U('User/comment')}&order_id="+oid;
}
$(document).ready(function(){
varWindowHeight=$(document).height;
$(window).scroll(function(){
vartop=$(document).scrollTop();
varheight=$(document).height()-$(window).height()-10;
if(top>=height){
getList();
}
});
});
以上就是小编为大家带来的jQuery实现手机版页面翻页效果的简单实例全部内容了，希望大家多多支持毛票票~