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 相关文章推荐
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
浅谈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 disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php实现微信公众号无限群发
2015/10/11 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python中append实例用法总结
2019/07/30 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
党员检讨书
2014/10/13 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书