根据滚动条下拉加载列表

最新推荐文章于 2024-04-21 09:58:22 发布

百世沉浮

最新推荐文章于 2024-04-21 09:58:22 发布

阅读量569

点赞数

分类专栏：代码规范文章标签： javascript css 下拉加载

本文链接：https://blog.csdn.net/ch5256865/article/details/51954799

版权

代码同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

规范

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>周边商户</title>
<link href="lib/css/common.css" rel="stylesheet" />
<script src="lib/Js/jquery-1.9.1.min.js"></script>
<script>
var page=0;
var pageSize=4;

$(function(){
$('body').css("min-height",$(window).height()+1);
bindscroll();
})
function bindscroll(){
$(window).scroll(function () {
/*判断窗体高度与竖向滚动位移大小相加是否超过内容页高度*/
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if (($(window).height() + scrollTop) + 3 >= $(document).height()) {
page++;
// loadIndex++;
fn_bind();
}
});
}
function fn_bind(){
var id=$("#sorts").val();
var searchKey=$("#ar-sou").val();
$.ajax({
url: webapp.domain + "apis/v1/shops?classifyId="+id+"&pageNo="+page+"&pageSize="+pageSize+"&searchKey="+searchKey,
data: null,
type:"GET",
async:true,
dataType:"json",
success: function(data){
var json=data.data.entries;
console.log(json);
var html="";

if(data.code==20000){
for(var i=0;i<json.length;i++){
html+="<div class='ar-list' οnclick='fn_info((\"" + json[i].id + "\"))'>";
html+="<img src='"+json[i].cover+"' οnerrοr='javascript:this.src=\"lib/img/around/pic330-170.jpg\"' class='ar-left' alt=''>";
html+="<div class='ar-right'><div class='ar-tit text-ellipsis'>"+json[i].title+"</div>";
html+="<div class='ar-address text-ellipsis'>地址："+json[i].address+"</div>";
html+="<div class='ar-range'>距离1km</div></div>";
// html+="<div class=ar-tab><div class=ar-li>送货</div></div>";
html+="</div>";
}
$(".ar-cont").append(html);
if (json.length < pageSize) {
$(window).unbind("scroll");
$("#ticket_more").hide();
$("#ticket_nomore").show();
}
else {
$("#ticket_more").show();
$("#ticket_nomore").hide();
}
// codehtml=codehtml+html;
}
}

});
}

function fn_serach(){
bindscroll();
$(".ar-cont").html("");
page=1;
fn_bind();
}
</script>

</head>
<body>
<div class="area" style="border-bottom: solid 1px #ddd">
<div class="area-li">
<div class="area-line"></div>
<img src="lib/img/search.png" class="ar-serch ar-img" alt="">
</div>
<div class="area-li">
<a href="position.html"><img src="lib/img/position.png" class="ar-position ar-img" alt=""></a>
</div>

</div>
<div class="ar-cont clearfix">
</div>
<div id="ticket_more" class="ticket_more text-center" hidden>
滚动页面加载更多内容
</div>
<div id="ticket_nomore" class="ticket_nomore text-center" hidden>没有更多了</div>
</body>
</html>