久久国产免费,久久精品18,久久99国产一区二区三区

實現h5頁面無限滾動加載內容的方法是通過監聽滾動事件并在接近底部時請求新數據并渲染。一、檢測是否接近頁面底部：通過比較當前滾動位置（window.scrolly + window.innerheight）與頁面總高度（document.documentelement.scrollheight），當距離底部約100像素時觸發加載；二、請求并插入新數據：使用fetch或axios獲取數據，并將返回的每條數據創建為dom元素插入到容器中；三、防止重復加載和判斷結束：設置isloading鎖避免重復請求，服務器返回空數組時設nomoredata標志停止加載；四、優化體驗：添加加載提示、預留占位空間以避免跳動，大數據量時可采用虛擬滾動方案。

H5頁面如何實現無限滾動加載內容無限滾動加載技術詳解

H5頁面實現無限滾動加載內容，核心在于監聽用戶滾動行為，并在接近頁面底部時自動請求新數據并渲染。這種方式常見于移動端資訊、社交動態等場景，提升用戶體驗的同時也減少翻頁操作。

一、判斷是否接近頁面底部

實現無限滾動的第一步是檢測用戶是否快滾動到底部。可以通過比較當前滾動位置和頁面總高度來判斷：

頁面總高度：document.documentElement.scrollHeight
當前滾動位置：window.scrollY + window.innerHeight
判斷條件通常是當“當前滾動位置”接近或超過“頁面總高度的某個百分比”，比如 90% 或者距離底部還有幾十像素時觸發加載

window.addEventListener('scroll', () => {   const scrollTop = window.scrollY || document.documentElement.scrollTop;   const windowHeight = window.innerHeight;   const totalHeight = document.documentElement.scrollHeight;    if (scrollTop + windowHeight >= totalHeight - 100) {     // 觸發加載更多數據   } });

注意不要頻繁觸發加載，可以在加載過程中加一個鎖（loading flag），避免重復請求。

二、請求新數據并更新頁面內容

當檢測到用戶快滾動到底部后，下一步就是通過 ajax 或 Fetch 請求新數據，并將其插入到現有內容中。

通常的做法是：

使用 fetch 或 axios 向接口發起請求
接口返回結構通常是數組，包含新增的內容項
將這些內容項拼接成 html 字符串或者 DOM 元素插入到頁面容器中

舉個簡單例子，假設你有一個展示文章列表的容器 .list-container：

function loadMoredata() {   fetch('/api/articles')     .then(res => res.json())     .then(data => {       data.forEach(item => {         const div = document.createElement('div');         div.className = 'article-item';         div.innerHTML = `<h3>${item.title}</h3><p>${item.summary}</p>`;         document.querySelector('.list-container').appendChild(div);       });     }); }

如果使用 vue、React 等框架，則建議將這部分邏輯封裝成組件方法，在狀態中維護列表數據，再由模板自動渲染。

三、防止重復加載與結束判斷

無限滾動不能一直加載下去，需要處理兩個邊界情況：

防止重復加載：在一次加載完成之前，禁止再次觸發加載。可以設置一個變量如 isLoading = true，加載完成后設為 false。
判斷是否已加載完所有數據：服務器返回空數組或特定字段表示沒有更多數據時，停止繼續監聽滾動加載。

可以這樣控制流程：

設置 isLoading = false，初始值為 false
滾動到底部時，如果 isLoading === true 直接 return
加載開始前設為 true，加載結束后設為 false
如果服務器返回空數據，可設置一個標志如 noMoreData = true，后續不再執行加載

let isLoading = false; let noMoreData = false;  window.addEventListener('scroll', () => {   if (noMoreData || isLoading) return;    // 判斷是否接近底部...   isLoading = true;   fetch('/api/articles')     .then(res => res.json())     .then(data => {       if (data.length === 0) {         noMoreData = true;       } else {         // 插入新內容       }       isLoading = false;     }); });