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

把需要下拉加载的内容进行转为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的隐藏标签 用来存储已经加载了多少数据。

至此功能完结。

jQuery+Asp.net 实现简单的下拉加载更多功能的更多相关文章

  1. 使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能

    * mescroll请参考官方文档 1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行) 代码如下: var mescroll = new MeS ...

  2. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  3. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  4. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  5. Windows Phone 8.1开发:如何让ListView下拉加载更多?

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  6. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  7. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  8. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  9. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

随机推荐

  1. Mavlink协议理解

    来源:blog.csdn.net/super_mice/article/details/44836585 之前看了mavlink协议,网上关于mavlink的资料不多.本文大概总结了下对mavlink ...

  2. VMware Workstation Pro 14注册码,亲测可用

    ** VMware Workstation Pro 14注册码 ** 作者网上搜集整理 作者使用的密钥是: AC5XK-0ZD4H-088HP-9NQZV-ZG2R4 亲测可用 以下密钥未测试 CG5 ...

  3. javascript之 JavaScript 工具库

    javascript之 JavaScript 工具库jQuery 目录: 一.查找标签和事件绑定以及操作标签的对比 二.DOM对象和jquery的转换 三.$(document).ready( )  ...

  4. MobaXterm连接远程Linux服务器

    MobaXterm是一个X服务器和一组的Unix命令(GNU/ Cygwin的)封装在一个单一的便携式exe文件的增强终端. MobaXterm包括一个巨大的multitab原生的Windows终端. ...

  5. [WPF][ListBox]鼠标拖拽多选,(Shift Key、Ctrl Key多选有效)(转)

    <ListBox Name="listBox" SelectionMode="Extended"> <ListBox.Resources> ...

  6. weblogic 忘记控制台账号密码 进行重新设置

    第一步:首先要关闭weblogic服务. 第二步:对一些重要的文件进行备份: 1. 为了保证操作安全,备份%DOMAIN_HOME%/security/DefaultAuthenticatorInit ...

  7. Java static修饰符小记

    首先我们明确一点:java是一个纯面向对象的编程语言,它的每一个文件都视为一个类,当我们创建一个对象的时候,就是在调用一个文件,那么这个时候,这个文件(类)里的一些东西,它是需要通过对象来使用或访问, ...

  8. swift和oc之间的相互调用(block,代理)

    第一:swift->oc 这个相对简单一点, 在自动生成的桥接文件中导入你要掉的oc文件名就可以了, 如果没有生成桥接文件也可以自己手动创建(Header File) 第二:oc->swi ...

  9. TypeScript 编译选项

    编译选项 选项 类型 默认值 描述 --allowJs boolean false 允许编译javascript文件. --allowSyntheticDefaultImports boolean m ...

  10. 嵌入式linux:通过qemu模拟mini2440开发环境

    1 编译安装QEMU 首先下载qemu for mini2440,直接打包下载 http://repo.or.cz/w/qemu/mini2440.git/snapshot/HEAD.tar.gz  ...