ajax 滚动底部加载下一页

曹え 5811 发布于:2023-09-01 09:08:32

滚动到底部时候加载下一页

html

<ul class="ul-item">
							
							{foreach $lists as $v}
							<li>
								<a href="{$v['url']}" class="item wow fadeInUp">
									<div class="pic">
										<img src="{$v['litpic']}" alt="{$v['title']}">
									</div>
									<div class="txt">
										{$v['title']}
									</div>
								</a>
							</li>
							{/foreach}
						</ul>
						
<style type="text/css" media="all">
    .loader-inner {padding:20px; color:#999; text-align:center; font-size:12px}
</style>
						<div class="loader-inner ball-clip-rotate dn"></div>

						{if($lists)}
						<div class="pages">
							<ul>
								<li class="page-sum disabled"><a href="{$listpage['prev']}"></a></li>
								{foreach $listpage['list'] as $ss}
								<li class="{if($ss['num']==$listpage['current_num'])}on{/if}"><a
										href="{$ss['url']}">{$ss['num']}</a></li>
								{/foreach}
								<li class="next-page"><a href="{$listpage['next']}"></a></li>
							</ul>
						</div>
						{/if}


js

<script>
					
					$(window).scroll(function() {
						var scrollTop = $(this).scrollTop(),
							scrollHeight = $(document).height(),
							windowHeight = $(this).height();
						var positionValue = (scrollTop + windowHeight) - scrollHeight;
						
							console.log(positionValue)
						if (positionValue == 0) {
							updateList();
							$('.loader-inner').show();
						}
					});
					var url = $('.next-page a').attr('href');
					function updateList() {
						var time = 0;
						setInterval(function() {
							time++;
						}, 1000)
						var loadImage = 0;
						$.get(url).done(function(data) {
							if (!url) {
								$('.loader-inner').text('已经到最后一页');
								return 1
							}
							var newImgList = $(data).find('.ul-item').html();
							url = $(data).find('.next-page a').attr('href');
							console.log(url)
							console.log(newImgList)
							$('.ul-item').append(newImgList)
							
						})
					}
				</script>


觉得有用请点个赞吧!
0 147