A simple example of how jquery realizes the page-turning effect of a mobile version _jquery

The

looks like this:

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 () > to evaluate </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 St yle= "z-index:0 href=" {pigcms{:u (' order/status ', Array ("order_id" => "<order_id>")} ">\ <div clas s= "List-img" > \ <div class= "list-content" >\ <div "class=" Order-detail & 
            Lt;p class= "Time" >{create_time}</p>\ <p class= "desc" > Total Price: ￥{discount_price}</p>\ </div>\ <div class= "order-content-rt" >\ <div "class=" > {s 
      Tate}{comment_tpl}</div>\ </div>\ </div></a>\ </div>\ 
</li> '; var emptytpl = ' <div id= "refund-widget-list" class= "refund-widget-list" >\ <ul "class= refundlist" data-no De= "Refundlist" >\ <div class= "No-result" >\ <figure></figure>\ <p> No orders & 
lt;/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 (NE 
    W 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; " 
    > has evaluated </span></div> '; else {item[' comment_tpl '] = ' <div style= ' margin-top:10px ' ><span style= ' width:55px; 
    ></span></div> '; } SWITCH (item[' order_status ']) {case ' 0 ': item[' state ' = ' invalid order '; break case ' 1 ': item[' state '] = ' order completed '; break Case ' 2 ': item[' state ' = ' merchant not confirmed '; break case ' 3 ': item[' state ' = ' merchant confirmed '; break case ' 4 ': item[' state '  ] = ' meal taken '; break case ' 5 ': item[' state ' = ' is being distributed '; break case ' 6 ': item[' state ' = ' withdraw form '; break case ' 7 ': item[' state ' = ' merchant cancels order '; break case ' 8 ': item[' state ' = ' distributor received '; 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 (); 
} 
  });  });

The above is a small series of jquery to achieve a mobile phone version of the page effect of a simple example of all the content, I hope that we support cloud-Habitat Community ~