jQuery+Asp.net 实现简单的下拉加载更多功能
原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下。大概可以整理一下思路跟代码。
把需要下拉加载的内容进行转为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 实现简单的下拉加载更多功能的更多相关文章
- 使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能
* mescroll请参考官方文档 1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行) 代码如下: var mescroll = new MeS ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- jquery实现下拉加载更多
下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...
- 下拉加载更多DEMO(js实现)
项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...
- Windows Phone 8.1开发:如何让ListView下拉加载更多?
Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...
- iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- dropload.js下拉加载更多
项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...
- H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
- JQ下拉加载更多
<!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...
随机推荐
- 巧用前端神器,fakerjs生成json文件
安装 cnpm install faker json-serve --save-dev 在目录下创建一个模板文件 示例 makeJson.js var faker = require('faker') ...
- filter 拦截ajax请求
1.filterpublic class SessonFilter implements Filter { private static Logger log = LoggerFactory.getL ...
- C# 常见的字符串操作
例1: 遍历字符串中的每一个字符: string src = "aa-b - c-a - d-e- d-e- a- a-b-cc"; foreach(char c in src) ...
- Selenium常见元素定位方法和操作的学习介绍
参考地址: https://www.cnblogs.com/eastmount/p/4810690.html 这篇文章主要Selenium+Python自动测试或爬虫中的常见定位方法.鼠标操作.键盘操 ...
- .gitignore梳理
参考来源: https://www.cnblogs.com/kevingrace/p/5690241.html 对于经常使用Git的朋友来说,.gitignore配置一定不会陌生.废话不说多了,接下来 ...
- rmtree函数
blog.csdn.net/my2010sam/article/details/8956353
- Python爬虫实战:爬糗事百科的段子
一个偶然的机会接触了Python,感觉很好用,但是一直在看c++啥的,也没系统学习.用过之后也荒废了许久.之前想建个公众号自动爬糗事百科的段子,但是没能建起来,真是尴尬,代码上传的服务器上之后,不能正 ...
- 编译防火墙——C++的Pimpl惯用法解析
http://blog.csdn.net/lihao21/article/details/47610309 Pimpl(pointer to implementation, 指向实现的指针)是一种常用 ...
- 【BZOJ1045】糖果传递(基于贪心的数学题)
点此看题面 大致题意: 有\(n\)个小朋友坐成一圈,每人有\(a[i]\)个糖果.每人只能给左右两人传递糖果,传递一个糖果代价为1,求使所有人获得均等糖果的最小代价. 数学转换 这题其实是一道带有浓 ...
- Andrew NG 自动化所演讲(20140707):DeepLearning Overview and Trends
出处 以下内容转载于 网友 Fiona Duan,感谢作者分享 (原作的图片显示有问题,所以我从别处找了一些附上,小伙伴们可以看看).最近越来越觉得人工智能,深度学习是一个很好的发展方向,应该也是未来 ...