當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【转】超酷的 mip-infinitescroll 无限滚动（无限下拉）

發布時間：2025/3/8 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了【转】超酷的 mip-infinitescroll 无限滚动（无限下拉）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

寫在前面

無限滾動技術（又叫做無限下拉技術）被廣泛應用于新聞類，圖片預覽類網站。對用戶來講，使用無限滾動的頁面有源源不斷的信息可以預覽，增加用戶在頁面的停留時長。技術上原理也很簡單，在頁面加載時加載一部分內容，當用戶瀏覽到底部時想后端請求更多內容，顯示在頁面上。因此，繼 mip-list 列表組件之后，為提升用戶體驗，開發了 mip-infinitescroll 無限滾動組件。

簡介

mip-infinitescroll 是無限滾動（別名：無限下拉）組件，就像它的名字一樣，它會監聽指定 DOM 節點（固定為 document.body）的滾動事件，當頁面滾動到底部的時候，會通過接口去異步請求數據 list，然后根據用戶指定的模板渲染成 html， append 到指定的容器中。

mip-infinitescroll 初始化的時候會先請求一次數據，然后渲染到頁面上，此時，如果數據沒有鋪滿屏幕，則會繼續請求數據直到鋪滿屏幕。

mip-infinitescroll 沒有做任何樣式限制，開發者可以根據需求對組件在頁面中的樣式自行完善，也就是說，你想讓它長啥樣，它就長啥樣。

示例

如下是 mip-infinitescroll 的一個效果展示，可以看到在滑動頁面的過程中，頁面底部的提示信息是 loading，當全部數據加載完畢，頁面底部的提示信息展現為 over！

屬性及子節點

要想在頁面中添加一個 mip-infinitescroll 組件，有一些屬性和其子節點是必須要有的，還可以覆蓋 mip-infinitescroll 一些配置參數達到更完美的效果。

data-src 屬性（必選項）

是異步請求數據的接口，需要支持 https；接口 callback 需要設置為 ‘callback’；異步接口返回的數據需要滿足如下格式：
{"statsu": 0,"data": {"items":[]} }
- status 0 表示請求成功
- items: [] 是需要渲染的數據
.mip-infinitescroll-results 子節點（必選項）

是結果容器，每次異步請求數據之后，都會將對應的 html append 到這個容器中。例如給 div 加上 mip-infinitescroll-results class，那么這個 div 就是結果容器，每次請求的數據渲染后的 html 都會 append 到這個 div 中。
.mip-infinitescroll-loading 子節點（必選項）

提示信息容器，在異步請求時、請求失敗以及請求成功三種狀態會有三種對應的提示信息。如果不設置則看不到提示信息。例如給 div 加上 mip-infinitescroll-loading class，那么這個 div 就是提示信息的容器。
template 屬性（非必選項）

與模板 id 對應，用來標識所采用的模板，默認取組件子節點中的 template 模板。
script[type="application/json"] 子節點（非必選項）
<script type="application/json">{"rn": 15, // results number 想要顯示的結果總數"prn": 3, // page result number 每頁數量"pn": 1, // page number 頁碼"pnName": "pn", // 表示頁碼的變量名"bufferHeightPx": 40, // 緩沖高度 , 距離底部一定高度時提前請求數據"loadingHtml": "loading", // loading 狀態提示信息"loadFailHtml": "failed", // 請求失敗狀態提示信息"loadOverHtml": "over!" // 請求成功狀態提示信息} </script>

MIP 官網文檔 mip-infinitescroll 無限滾動中對組件各個參數的說明、使用以及默認值等進行了詳細的說明。

使用

首先，構造一個符合 MIP 規范的頁面；然后，添加 mip-infinitescroll 組件腳本及 html 標簽；一個簡單的 demo 就完成了。

<!DOCTYPE html> <html mip><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css"><link rel="canonical" href="https://www.mipengine.org/test_xxx.html"><title>Hello MIP</title><style mip-custom></style></head><body>Hello MIP!<mip-infinitescroll data-src="https://your/ajax/api" template="myTemplate"><script type="application/json">{"rn": 15,"prn": 3,"pn": 1,"pnName": "pn","bufferHeightPx": 40,"loadingHtml": "loading","loadFailHtml": "failed","loadOverHtml": "over!"}</script><template type="mip-mustache" id="myTemplate"><li><mip-img layout="responsive"width="600"height="120"src="{{img}}"></mip-img><p> 第{{number}}張圖 </p></li></template><div class="mip-infinitescroll-results"></div><div class="mip-infinitescroll-loading"></div></mip-infinitescroll><script src="https://c.mipcdn.com/static/v1/mip.js"></script><script src="http://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"></script><script src="http://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script></body> </html>

總結

以上是生活随笔為你收集整理的【转】超酷的 mip-infinitescroll 无限滚动（无限下拉）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。