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实现手机版页面翻页效果的简单实例全部内容了,希望大家多多支持毛票票~