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遍历表格的实例
Jul 10 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
浅析JavaScript中的变量提升
Jun 01 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编程与应用
2006/10/09 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
公司投资建议书
2014/05/16 职场文书
战友聚会策划方案
2014/06/13 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
python flask开发的简单基金查询工具
2021/06/02 Python
MySQL 数据 data 基本操作
2022/05/04 MySQL