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

如下所示：

var page = 1;
var size = 6;
var mark = 0;
var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}";
var commentTpl = '<div style="margin-top: 10px">\
        <button data-oid="<order_id>" style="width: 65px; height: 20px;z-index:999;" onclick="comment()">去评价</button>\
        </div>';
var template = '<li class="item-order-li">\
          <a class="item-shop" href="{Pigcms{:U('Store/shop', array("store_id"=>"<store_id>"))}">\
            <i class="shop-icon"></i>\
            <span class="shop-name">{store_name}</span>\
            <i class="enter-icon"></i>\
          </a>\
        <div class="item-order" data-node="item-order" data-oid="<order_id>" data-status="0">\
        <a style="z-index:0;" href="{pigcms{:U('Order/status', array("order_id"=>"<order_id>"))}">\
          <div class="list-img"> <img class="lazy-load" src="{pic_info}"> </div>\
          <div class="list-content">\
            <div class="order-detail">\
              <p class="time">{create_time}</p>\
              <p class="desc">总价：￥{discount_price}</p>\
            </div>\
            <div class="order-content-rt">\
              <div class="order-status "> {state}{comment_tpl}</div>\
            </div>\
          </div></a>\
        </div>\
      </li>';
var emptyTpl = '<div id="refund-widget-list" class="refund-widget-list">\
        <ul class="refundlist" data-node="refundList">\
      <div class="no-result">\
        <figure></figure>\
        <p>暂无订单</p>\
      </div>\
      </ul>\
      </div>';
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('<order_id>', "gm"), item['order_id']);
    } else if(item['comment_status'] == 1 && item['order_status'] == 1){
      item['comment_tpl'] = '<div style="margin-top: 10px"><span style="width: 55px; height: 20px;">已评价</span></div>';
    } else {
      item['comment_tpl'] = '<div style="margin-top: 10px"><span style="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(new RegExp('<order_id>', "gm"), item['order_id']);
    html = html.replace(new RegExp('<store_id>', "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实现手机版页面翻页效果的简单实例全部内容了，希望大家多多支持我们~