jQuery+Asp.net 实现简单的下拉加载更多功能
2014-04-13 12:32
716 查看
原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下。大概可以整理一下思路跟代码。
把需要下拉加载的内容进行转为JSON处理存在当前页面:
下面就是javascript代码的事情了
把需要下拉加载的内容进行转为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的隐藏标签 用来存储已经加载了多少数据。 至此功能完结。
相关文章推荐
- 使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能
- ASP.NET中使用Application对象实现简单在线人数统计功能
- ASP.NET使用Cookie简单实现记住登陆状态功能
- ASP.NET简单实现注销功能
- asp.net中实现下载功能就是这样简单/asp.net中实现上传功能也是这样简单
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- Android ListView实现上拉加载更多和下拉刷新功能
- asp.net连接sql server2005实现简单的登录功能
- 简单的asp.net模拟邮箱系统基础实现(二 (2)具体版块功能的实现及关键代码之登陆页面)
- 怎样用asp.net实现简单的查询功能
- 简单的asp.net模拟邮箱系统基础实现(一 总体功能版块的设计,与简单数据库的设计)
- asp.net点击 查看更多 实现无刷新加载的实现代码
- asp.net MVC实现简单的上传功能
- 简单的asp.net模拟邮箱系统基础实现(二 (1)具体版块功能的实现及关键代码之注册页面)
- ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能
- jQuery+Asp.Net实现省市二级联动功能的方法
- 也说 Jquery+ASP.NET 实现开心网上传头像剪裁功能
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
- 为Recycler添加下拉刷新,上拉加载更多功能(简单实现)