jQuery实现手机版页面翻页效果的简单实例

如下所示：

var page = 1; 
var size = 6; 
var mark = 0; 
var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}"; 
var commentTpl = ' 
 去评价 
 '; 
var template = '
 
   ""))}"> 
      
     {store_name} 
      
    
 " data-status="0"> 
 ""))}"> 
      
    
      
{create_time}
 
总价：￥{discount_price}
 
      
      
 {state}{comment_tpl} 
      
    
  
      
'; 
var emptyTpl = ' 
 
 
       
 
 
 
暂无订单
 
       
      
 
      '; 
function getList() { 
  if (mark) { 
    return false; 
  } 
  mark = 1; 
  var requestUrl = url.replace(/d%/, page); 
  $("#page-loader").show(); 
  $.get(requestUrl, function(json){ 
    if (json.num > 0) { 
      render(json.list); 
      $("#page-loader").hide(); 
      page = page + 1; 
    } else if(json.num <= 0 && page == 1) { 
      $(".order-list").html(emptyTpl); 
    } 
    if (json.num >= size) { 
      mark = 0; 
    } 
    $("#page-loader").hide(); 
  }, 'json'); 
} 
function render(data){ 
  for (var i=0,item; item=data[i++];) { 
    var html = template; 
    if (item['comment_status'] == 0 && item['order_status'] == 1) { 
      item['comment_tpl'] = commentTpl.replace(new RegExp('', "gm"), item['order_id']); 
    } else if(item['comment_status'] == 1 && item['order_status'] == 1){ 
      item['comment_tpl'] = '已评价'; 
    } else { 
      item['comment_tpl'] = ''; 
    } 
    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(new RegExp('', "gm"), item['order_id']); 
    html = html.replace(new RegExp('', "gm"), item['store_id']); 
    for (var key in item) { 
      html = html.replace(new RegExp('{'+key+'}',"gm"), item[key]); 
    } 
    $(".order-list").append(html); 
  } 
} 
getList(); 
 
 
function comment(e){ 
  e = e || window.event; 
  e.stopPropagation(); 
  e.preventDefault(); 
  var oid = $("button").attr("data-oid"); 
  location.href = "{pigcms{:U('User/comment')}&order_id="+oid; 
} 
 
 
$(document).ready(function(){ 
  var WindowHeight = $(document).height; 
  $(window).scroll(function(){ 
    var top = $(document).scrollTop(); 
    var height = $(document).height() - $(window).height() - 10; 
    if (top >= height) { 
      getList(); 
    } 
  }); 
}); 

以上就是小编为大家带来的jQuery实现手机版页面翻页效果的简单实例全部内容了，希望大家多多支持考高分网~