曹え 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>
登录后可以留言提问!
微信扫码登录