標籤:頁碼 drop ext com word http 頁面 viewport page
一、原理:當捲軸到達底部時,執行下一頁內容。
判斷條件需要理解三個概念:
1.scrollHeight 真實內容的高度
2.clientHeight 視窗的高度,即在瀏覽器中所能看到的內容的高度
3.scrollTop 視窗上面隱藏掉的部分,即捲軸滾動的距離
思路:
1.使用fixed定位載入框
2.使用$(window).scroll();方法來觸發是否載入
3.通過 真實內容高度 - 視窗高度 - 上面隱藏部分 < 5 ,作為載入觸發的條件
JavaScript代碼:
<script type="text/javascript"> var page=2; //當前頁的頁碼 var allpage; //總頁碼,會從後台擷取 var catid="{$catid}"; function showAjax(page){ $.ajax({ url:"", type:"post", data:{page:page,catid:catid}, success:function(data){ //要執行的內容 showContent(data); } }) } function scrollFn(){ //真實內容的高度 var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight); //視窗的高度 var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; //隱藏的高度 var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; if(pageHeight - viewportHeight - scrollHeight < 50){//如果滿足觸發條件,執行 showAjax(page); } } function showContent(data){ var list=eval(‘(‘+data+‘)‘); var ss=‘‘; for (var i in list) { ss=ss+‘<li><a href="‘+list[i][‘url‘]+‘">‘+list[i][‘title‘]+‘</a></li>‘; } $(".minsuList").append(ss); page++; //頁數加1 } $(window).bind("scroll",scrollFn);//綁定滾動事件 </script>
二、
$(window).scroll(function () {
//已經滾動到上面的頁面高度
var scrollTop = $(this).scrollTop();
//頁面高度
var scrollHeight = $(document).height();
//瀏覽器視窗高度
var windowHeight = $(this).height();
//此處是捲軸到底部時候觸發的事件,在這裡寫要載入的資料,或者是拉動捲軸的操作
if (scrollTop + windowHeight == scrollHeight) {
dragThis.insertDom();
}
});
三、js外掛程式
移動端下拉重新整理、上拉載入更多外掛程式droploadH5基於iScroll實現下拉重新整理,上拉載入更多
js 實現無限載入分頁(適合移動端)