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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
Less 安装及基本用法
2018/05/05 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
pandas的qcut()方法详解
2019/07/06 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
Java的for语句中break, continue和return的区别
2013/12/19 面试题
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
应届生高等护理求职信
2013/10/12 职场文书
服务员岗位责任制
2014/02/11 职场文书
小学信息技术教学反思
2016/02/16 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Python的property属性详细讲解
2022/04/11 Python