在實際的產(chǎn)品設計中，我們經(jīng)常會需要設計加載更多功能。那么在設計這個功能時，我們應該要考慮哪些地方呢？下文是我對這個問題的詳細分析。

1.功能概述

功能名稱：加載更多

功能描述：點擊“加載更多”按鈕、或上拉列表時，加載更多的內(nèi)容。

1.1、使用場景：

當一個頁面有較多的信息要展示給用戶時，為了減少用戶單次請求對辦事器產(chǎn)生的性能壓力和時間損耗，每次只加載固定數(shù)量的少量信息。用戶瀏覽完之后，再向辦事器發(fā)起請求，加載更多內(nèi)容。

常用于內(nèi)容列表，如圖文列表、資訊列表、專題列表、評論列表等。

1.2、常見案例

淘寶搜索結(jié)果頁商品列表、簡書文章列表、網(wǎng)易云音樂精彩評論列表、脈脈匿名八卦的熱門評論、混沌大學熱文列表等。

2.功能分析

2.1、數(shù)據(jù)流向圖

該功能實現(xiàn)邏輯是：

1. 前端通過接口，向后臺發(fā)起請求；

2. 接口將用戶信息、當前頁數(shù)傳到后臺；

3. 后臺接受信息，，獲取下一頁數(shù)據(jù)列表；

4. 從數(shù)據(jù)庫中提取下一頁數(shù)據(jù)；

5. 對數(shù)據(jù)進行排序；

6. 后臺通過接口，將數(shù)據(jù)回傳給前端；

7. 前端接收信息，并將信息按既定樣式展示出來。

用數(shù)據(jù)流轉(zhuǎn)圖體現(xiàn)如下：

2.2、觸發(fā)方式

大部分產(chǎn)品都使用以下兩種方式來觸發(fā)“加載更多”功能：

1.上拉列表頁面：在淘寶的商品搜索結(jié)果頁，當頁內(nèi)容瀏覽完后，上拉頁面，將自動加載更多商品。

2.點擊“加載更多”按鈕：如人人都是產(chǎn)品經(jīng)理點擊列表頁面底部的“加載更多”按鈕加載。如下圖：

2.3、需求點描述-交互

以“混沌大學熱文列表”為例：

1. 頁面滾動到底部時，稍微上拉列表：底部顯示“上拉可以加載更多”提示，向辦事器發(fā)起加載更多內(nèi)容的請求。

標簽：烏魯木齊 林芝 九江 東營 鹽城