原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下。大概可以整理一下思路跟代码。

把需要下拉加载的内容进行转为JSON处理存在当前页面:

<script type="text/javascript">var objson = eval([{"Id":"5991","product_name":"正品璐瑶颈肩按摩器  披肩颈椎按摩","order_by":"98569","is_show":"True","price":"428","sale_price":"399","Images":"saxjua16.jpg"},{"Id":"5990","product_name":"多功能绞肉机  家用料理机 电动搅拌机","order_by":"98568","is_show":"True","price":"429","sale_price":"399","Images":"d2yjivhl.jpg"},....更多省略]</script>

下面就是javascript代码的事情了

<script type="text/javascript">
$(document).ready(function () {
var totalheight = 0;
function loadData() {
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if ($(document).height() <= totalheight) {
GetProducts();//加载数据
}
}
$(document).scroll(function () {
loadData();
}); function GetProducts() {
var htmlSource;
var iIndex = 6; //每次加载元素数量
var icount = parseInt($("#hidJsonCount").val()); //已加载数量 作为for下标值
var obj = objson;
if (obj.length - icount < 6) {
iIndex = obj.length - icount;
}
if (icount < obj.length) {
for (var i = icount; i < (icount+iIndex); i++) {
var val = obj[i];
htmlSource += '<div class="deal">';
htmlSource += '<a href="p_show.aspx?productId=' + val.Id + '" target="_blank">';
htmlSource += '<img src="http://www.baidu.com/upload-file/images/product/' + val.Images + '" alt="" border="0" title="' + val.product_name + '"></a>';
htmlSource += '<h3>';
htmlSource += '<a href="p_show.aspx?productId=' + val.Id + '" title="' + val.product_name + '" target="_blank">' + val.product_name + '</a>';
htmlSource += '</h3>';
htmlSource += '<h4>';
htmlSource += '<em><b>¥</b>' + val.sale_price + '</em><a href="p_show.aspx?productId=' + val.Id + '" target="_blank">查看</a>';
htmlSource += '</h4>';
htmlSource += '<span class="newicon"></span>';
htmlSource += '</div>';
}
$("#hidJsonCount").val((icount + iIndex).toString());
}
$("#moreProduct").append(htmlSource);
}
});
</script>
$("#hidJsonCount").val();此处为一个input hidden的隐藏标签 用来存储已经加载了多少数据。

至此功能完结。

最新文章

  1. [linux系统]--搭建ftp服务器并且 创建用户 设置密码
  2. Hibernate映射文件创建和删除触发器,存储过程等数据库对象
  3. 网站优化之PHPCMS如何开启伪静态
  4. 磁盘的读写-想起了SGA PGA DBWR LGWR...
  5. 【IOS笔记】Views
  6. printf()函数
  7. H5标签-canvas实现颜色拾取功能
  8. MS SQL SERVER 数据库日志压缩方法与代码
  9. linux挂载问题解决
  10. 反射自动填充model
  11. Struts2国际化文件乱码解决
  12. BZOJ 2226 LCMSum
  13. java异常体系结构详解
  14. 【js】event(事件对象)详解
  15. vue 学习笔记—Es6
  16. 进程间通信IPC-命名管道FIFO
  17. 转载:《RESTful API 设计指南》 阮一峰
  18. Linux下稀疏文件的存储方式
  19. sklearn.svm.LinearSVC文档学习
  20. etcd 集群部署

热门文章

  1. jQuery开发插件的两个方法 js 深浅拷贝
  2. Python开发环境Wing IDE如何进行命令行调试
  3. ArcGIS for Android 10.1.1API 中文标注导致程序异常崩溃问题
  4. C#问题记录-CallbackOnCollectedDelegate
  5. cms-详细页面2
  6. getline()读入一整行
  7. 如何用WebIDE打开并运行CRM Fiori应用
  8. 【挖坑】2019年JAVA安全总结:SQL注入——新项目的开发与老项目的修复
  9. slenium的xpath几种定位方式
  10. 123apps-免费网络应用