<div class="bus-nav-bar ft12">
<div class="navt bor-r-c pos-rel {if $int == 0}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=0">全部订单</a><em class="pos-abs"></em></div>
<div class="navt bor-r-c pos-rel {if $int == 7}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=7">最近7天订单</a><em class="pos-abs"></em></div>
<div class="navt pos-rel {if $int == 30}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=30">最近一个月订单</a><em class="pos-abs"></em></div>
</div>
<div class="bus94 m-0-auto" id="vlist">
<ul class="busbox ft12">
<li class="headh2">消费确认码:<span class="checkcode"></span></li>
<li class="headh2">电 子 串 码:<span class="password"></span></li>
<li class="headh2">商 品 名 称:<span class="productname"></span></li>
<li class="headh2">商 品 价 格:¥<span class="price"></span></li>
<li class="headh2">验 证 时 间:<span class="checktime"></span></li>
</ul>
<div id="get_more" class="txtcent button ft12">更多</div>
</div> <script type=text/javascript src="{STATICURL}js/mobile/jquery.more.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#vlist').more({
"url": 'portal.php?mod=ajax&do=mvoucher',
"data":{"int":"{$int}"},
"template": ".busbox",
"trigger": "#get_more"
});
});
</script>

  

php代码

//手机商户已验证代金券列表
$int = intval($_GET['int']);
$int = in_array($int, array(0,7,30)) ? $int : 0;
$params = null;
if($int == 7){
$params = array('starttime'=>date("Y-m-d",strtotime("-7days")));
}elseif($int == 30){
$params = array('starttime'=>date("Y-m-d",strtotime("-30days")));
}
$last = intval($_GET['last'])/5 + 1;
$data = merchant_checked_list(107, $params, 5, $last);
if($data && $data['data']){
foreach($data['data'] as $key => $value){
$data['data'][$key]['password'] = decrypt($value['password']);
$data['data'][$key]['price'] = deal_money($value['price']);
$data['data'][$key]['checktime'] = date('Y-m-d H:i:s', $value['checktime']);
}
echo json_encode($data['data']);
}

  jquery.more.js

/**
* 调用参数,方法如:$('#more').more({'url': 'data.php'});
* amount :'10' 每次显示记录数
* url :'comments.php' 请求后台的地址
* data:{}, 自定义参数
* template:'.single_item' html记录DIV的class属性
* trigger :'#get_more' 触发加载更多记录的class属性
* scroll :'false' 是否支持滚动触发加载
* offset :'100' 滚动触发加载时的偏移量
*/
(function($) {
var target = null;
var template = null;
var lock = false;
var variables = {
'last': 0
};
var settings = {
'amount': '8',
'url': '',
'template': '.single_item',
'data':{},
'trigger': '#get_more',
'scroll': 'false',
'offset': '100'
};
var methods = {
init: function(options) {
return this.each(function() {
if (options) {
$.extend(settings, options);
}
template = $(this).children(settings.template).wrap('<div/>').parent();
template.css('display', 'none');
$(this).append('<div class="loading ft12" id="waitbox"><img src="/static/m/images/loading.gif" width="19" height="19" />载入中..</div>');
$(this).children(settings.template).remove();
target = $(this);
if (settings.scroll == 'false') {
$(this).find(settings.trigger).bind('click.more', methods.get_data);
$(this).more('get_data');
} else {
if ($(this).height() <= $(this).attr('scrollHeight')) {
target.more('get_data', settings.amount * 2);
}
$(this).bind('scroll.more', methods.check_scroll);
}
});
},
check_scroll: function() {
if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false) {
target.more('get_data');
}
},
remove: function() {
target.children(settings.trigger).unbind('.more');
target.unbind('.more');
target.children(settings.trigger).remove();
},
add_elements: function(data) {
var root = target;
var counter = 0;
if (data) {
$(data).each(function() {
counter++;
var t = template;
$.each(this, function(key, value) {
if (t.find('.' + key))
t.find('.' + key).html(value);
});
if (settings.scroll == 'true') {
root.children('.more_loader_spinner').before(t.html());
} else {
root.children(settings.trigger).before(t.html());
}
root.children(settings.template + ':last').attr('id', 'more_element_' + ((variables.last++) + 1));
});
} else {
methods.remove();
}
target.children('.more_loader_spinner').css('display', 'none');
if (counter < settings.amount)
methods.remove();
},
get_data: function() {
var ile;
lock = true;
target.children(".more_loader_spinner").css('display', 'block');
$(settings.trigger).css('display', 'none');
if (typeof (arguments[0]) == 'number')
ile = arguments[0];
else {
ile = settings.amount;
}
var postdata = settings.data;
postdata['last'] = variables.last;
postdata['amount'] = ile;
$.post(settings.url, postdata, function(data) {
$(settings.trigger).css('display', 'block');
methods.add_elements(data);
lock = false;
$("#waitbox").remove();
}, 'json');
}
};
$.fn.more = function(method) {
if (methods[method])
return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
else if (typeof method == 'object' || !method)
return methods.init.apply(this, arguments);
else
$.error('Method ' + method + ' does not exist!');
}
})(jQuery)

  

使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据的更多相关文章

  1. jQuery的JS库在本地运行项目时提示无法加载

    最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...

  2. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

  3. jQuery Mobile页面跳转后未加载外部JS(转)

    http://thewaychung.iteye.com/blog/1807447 在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中 ...

  4. jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data ...

  5. ajax实现简单的点击左侧菜单,右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

  6. web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)

    (1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...

  7. 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

  8. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  9. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

随机推荐

  1. oclif cli app开发简单试用

    oclif 是heroku 开源的cli 开发框架,有一篇关于12 factor cli app 开发的文章很值得看看 https://medium.com/@jdxcode/12-factor-cl ...

  2. 使用 phpStudy + VSCODE 进行 PHP 断点调试

    使用 phpStudy + VSCODE 进行 PHP 断点调试 自己摸索过程有点曲折,但还是配置成功了,现分享如下. 原料 phpStudy 2018 VSCODE 配置过程 安装 phpStudy ...

  3. Oracle数据泵的使用

    几乎所有DBA都熟悉oracle的导出和导入实用程序,它们将数据装载进或卸载出数据库,在oracle  database 10g和11g中,你必须使用更通用更强大的数据泵导出和导入(Data Pump ...

  4. virtualbox centos安装增强工具和问题详解

    virtualbox centos安装增强工具和问题详解 VirtualBox 大家都习惯性把它简称为 Vbox ,比 VM 的体积小.开源.速 度快.不过在使用 VirtualBox 在虚拟机中安装 ...

  5. WPF ListView 简单的拖拽实现(转)

    首先设置ListView的AllowDrop=True:SelectionMode=Extended;并且ListView视图为GridVIew. private void listView1_Mou ...

  6. C# List的深复制(转)

    C# List的深复制 1.关于深拷贝和浅拷贝 C#支持两种类型:值类型和引用类型 值类型(Value Type):如 char, int, float,枚举类型和结构类型 引用类型(Referenc ...

  7. hadoop入门学习教程--DKHadoop完整安装步骤

    使用hadoop版本是DKH标准三节点发行版,DKHadoop版本的易用性比较好,环境部署要简单的多,参考此篇安装前请先下载DKHadoop版本,网盘链接:https://pan.baidu.com/ ...

  8. 【python】序列切片和range函数

    序列的每个元素都可以用2种索引的表达方式,一种是正数索引,另一种是负数索引. 序列切片,作用是访问序列中一定范围的元素,格式“序列名[A:B]”,其中A为所切片的第一个元素的索引号,而B为切片后剩下的 ...

  9. 转Python 和C#的交互

    http://www.cnblogs.com/wilber2013/category/708919.html IronPython和C#交互   IronPython是一个.NET平台上的Python ...

  10. Android Drawable Mipmap Vector使用及Vector兼容

    原文地址:http://blog.csdn.net/eclipsexys/article/details/51838119 http://blog.csdn.net/qq_15545283/artic ...