js滚动分页加载数据
2017-07-08 17:35
447 查看
实现理念:
1.判断滚动条到底部触发加载函数
2.请求数据
3.追加数据
html:
<div class="list_flex" id="listrow">
<!--数据加载提示,默认隐藏-->
<div id="add-more" style="text-align: center;">努力加载中...</div>
js:
//分页加载
$(function(){
var hasMore;
var page = 1; //初始页码
var maxnum = 2;//设置加载次数
var downrange= 100; //下边界-参考正在加载提示层/px
var $main = $("#showbox"); //主体
var $loaddiv = $("#add-more") ; //加载提示层
var totalheight = 0;
var $listrow=$("#listrow");
//ajax-fun
function ajaxLoad(){
var html="";
page=page+1;//每次拉到底部page加1
//console.log(page)
hasMore=false;
$.ajax({
url:"http://wechat.ixunluo.com/weishopcs/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke",
type:"post",
data:{page:page},//请求页数
success:function(res){
var list = eval(res);
//console.log(list.length);
//var list=JSON.parse(res);
if(list.length>0) {
hasMore=true;
//console.log(JSON.parse(res));
//追加数据
for(var i=0;i<list.length;i++) {
html+="<a href='./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id="+list[i].id+"'>";
html+="<div class='list_flex_son'>";
html+="<img data-original='"+res[i]+"' class='list_flex_son_img' src='"+list[i].thumb+"' style='height: 175.313px;'>";
html+="<div class='list_flex_son_title'>"+list[i].title+"</div>";
html+="<div class='list_flex_son_row'>";
html+="<span class='sfsr_price'>¥"+list[i].marketprice+"</span>";
html+="<span class='sfsr_tbprice'>淘宝价:"+list[i].productprice+"元</span>";
html+="</div>";
html+="</div>";
html+="</a>";
}
$listrow.append(html);//数据追加到list
var imgWidth=$('.list_flex_son_img').width();
$('.list_flex_son_img').height(imgWidth);
}
}
})
}
//加载中隐藏显示
$loaddiv.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
})
ifLoad();
//scroll滚动触发加载事件
function ifLoad(){
hasMore=true;
var w = $(window);
var lastTime = new Date();
window.addEventListener("scroll", function scrollHandler() {
var scrollh = $(document).height();
var bua = navigator.userAgent.toLowerCase();
if (bua.indexOf('iphone') != -1 || bua.indexOf('ios') != -1) {
scrollh = scrollh -140;
} else {
scrollh = scrollh - 80;
}
if(($(document).scrollTop() + w.height()) >= scrollh){
if (new Date()-lastTime <100) {
return;
}
lastTime = new Date();
if (hasMore) {
ajaxLoad();
}
}
}, 1000);
}
})
1.判断滚动条到底部触发加载函数
2.请求数据
3.追加数据
html:
<div class="list_flex" id="listrow">
<a href="./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id=1"> <div class="list_flex_son"> <img data-original="http://img3.tbcdn.cn/tfscom/i3/710919382/TB25HzOv3RkpuFjy1zeXXc.6FXa_!!710919382.jpg" class="list_flex_son_img"> <div class="list_flex_son_title">5条 无痕内裤女冰丝一片式中腰性感纯棉裆女士三角内裤大码薄款夏</div> <div class="list_flex_son_row"> <span class="sfsr_price">¥21.90</span> <span class="sfsr_tbprice">淘宝价:24.90元</span> </div> </div> </a>
</div>
<!--数据加载提示,默认隐藏-->
<div id="add-more" style="text-align: center;">努力加载中...</div>
js:
//分页加载
$(function(){
var hasMore;
var page = 1; //初始页码
var maxnum = 2;//设置加载次数
var downrange= 100; //下边界-参考正在加载提示层/px
var $main = $("#showbox"); //主体
var $loaddiv = $("#add-more") ; //加载提示层
var totalheight = 0;
var $listrow=$("#listrow");
//ajax-fun
function ajaxLoad(){
var html="";
page=page+1;//每次拉到底部page加1
//console.log(page)
hasMore=false;
$.ajax({
url:"http://wechat.ixunluo.com/weishopcs/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke",
type:"post",
data:{page:page},//请求页数
success:function(res){
var list = eval(res);
//console.log(list.length);
//var list=JSON.parse(res);
if(list.length>0) {
hasMore=true;
//console.log(JSON.parse(res));
//追加数据
for(var i=0;i<list.length;i++) {
html+="<a href='./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id="+list[i].id+"'>";
html+="<div class='list_flex_son'>";
html+="<img data-original='"+res[i]+"' class='list_flex_son_img' src='"+list[i].thumb+"' style='height: 175.313px;'>";
html+="<div class='list_flex_son_title'>"+list[i].title+"</div>";
html+="<div class='list_flex_son_row'>";
html+="<span class='sfsr_price'>¥"+list[i].marketprice+"</span>";
html+="<span class='sfsr_tbprice'>淘宝价:"+list[i].productprice+"元</span>";
html+="</div>";
html+="</div>";
html+="</a>";
}
$listrow.append(html);//数据追加到list
var imgWidth=$('.list_flex_son_img').width();
$('.list_flex_son_img').height(imgWidth);
}
}
})
}
//加载中隐藏显示
$loaddiv.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
})
ifLoad();
//scroll滚动触发加载事件
function ifLoad(){
hasMore=true;
var w = $(window);
var lastTime = new Date();
window.addEventListener("scroll", function scrollHandler() {
var scrollh = $(document).height();
var bua = navigator.userAgent.toLowerCase();
if (bua.indexOf('iphone') != -1 || bua.indexOf('ios') != -1) {
scrollh = scrollh -140;
} else {
scrollh = scrollh - 80;
}
if(($(document).scrollTop() + w.height()) >= scrollh){
if (new Date()-lastTime <100) {
return;
}
lastTime = new Date();
if (hasMore) {
ajaxLoad();
}
}
}, 1000);
}
})
相关文章推荐
- js滚动异步加载数据的思路
- 如何抓取Js动态生成数据且以滚动页面方式分页的网页
- vue.js 表格分页ajax 异步加载数据
- js实现数据加载分页功能的实现(通用)
- scroll pagination.js数据重复加载、分页问题
- js 窗口滚动到一定高度时加载数据
- js页面滚动到底部时自动加载下一页数据
- Javascript vue.js表格分页,ajax异步加载数据
- 抓取Js动态生成数据且以滚动页面方式分页的网页
- 手机端滚动分页加载数据模型
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- Javascript vue.js表格分页,ajax异步加载数据
- asp.net 使用js分页实现异步加载数据
- js实现滚动条边滚动边加载数据
- jquery 滚动条分页加载数据
- 抓取Js动态生成数据且以滚动页面方式分页的网页
- 纯js实现分页 原理:所有数据已加载好,js通过遍历部分显示,实现分页效果
- js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式