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


Posted in Javascript onOctober 05, 2016

如下所示:

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

Javascript 相关文章推荐
js计算精度问题小结
Apr 22 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
微信小程序登录换取token的教程
May 31 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 #Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 #Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 #Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 #Javascript
Jq通过td获取同行其它列td的方法
Oct 05 #Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 #Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
python中global用法实例分析
2015/04/30 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
大专生简历的自我评价
2013/11/26 职场文书
工程班组长岗位职责
2013/12/30 职场文书
初中毕业生的自我评价
2014/03/03 职场文书