手机网站下拉加载数据js(简单版)

时间:2021-06-01 21:31:56

加载内容的地方html

 <div class="bgcolor_f0 clearfix">
<div class="recharge">
<ul class="recharge-list">
内容的地方,第一加载输入
{loop $orderlist $order}
<li class="recharge-list-view">
{$order['date']}——站内充值
<span>{$order['money']}</span>
</li>
{/loop}
</ul>
</div>
</div>
<input type="hidden" id="page" value="1"/>//

下拉加载内容的js

    $(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var windowHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + windowHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
var page = parseInt($("#page").val())+1;
$.ajax({
type:'POST',
data:"page="+page,
url:SITEURL+'user/ajax_record_more',
dataType:'json',
success:function(data){
console.log(data.status);
console.log(data.orderlist);
if(data.status=='success'){
var html = '';
$.each(data.orderlist,function(i,row){
html+='<li class="recharge-list-view">'+row['date']+'——站内充值 <span>'+row['money']+'</span></li>';
})
$("#page").val(page);
$(".recharge-list").append(html);
} }
}) } }) })