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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
YUI模块开发原理详解
Nov 18 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
详解JavaScript函数
Dec 01 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue删除html内容的标签样式实例
Sep 13 Javascript
原生js实现公告滚动效果
Jan 10 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
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHP 学习路线与时间表
2010/02/21 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
如何基于python操作excel并获取内容
2019/12/24 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Python 里最强的地图绘制神器
2021/03/01 Python
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
表决心的诗句大全
2014/03/11 职场文书
年终工作总结范文2014
2014/11/27 职场文书
党员示范岗材料
2014/12/19 职场文书
村干部任职承诺书
2015/01/21 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis