项目总结：B端表格翻页和滚动加载模式

最近做的一个需求，有客户反馈想把B端的表格，由滚动式加载改为分页加载。除了大家知道的明显的一些体验、内容差异，结合最近做的一些表单的小需求，做了以下整理。

本文针对B端、网页端表单中数据展示：翻页和滚动的区别做分析。（不含移动端，不含C端资讯类信息流场景。）

一、翻页加载和滚动加载的数据是怎么显示的

1、如上图所示，我们看到的表单中的数据，是后端传给前端的。后端经过了2个步骤：第一筛选出符合条件的数据；第二展示数据。

如果没有筛选区或者筛选条件置空，那展示的就是全部数据。

2、后端会告诉前端哪些内容呢？无论是翻页加载还是滚动加载，后端都会传一个总数据数。翻页加载的方式，根据总数据数知道有多少页，第n页要展示哪些数据；滚动加载方式根据总数据数，知道是否应该有“加载更多”的按钮。

所以不要认为，显示总数据数会增加后端压力，需要后端再次遍历所有数据。

3、当有新的数据产生时，后端会告诉前端有新的数据需要展示。对于B端数据查看页面，无论是滚动加载还是翻页加载，有新的数据进来，会使用“新消息提示”的方式，这时候需要用户手动点击，页面才能展示新的数据。

4、上面说的是有新数据进来，还有一种情况：就是删了页面中展示的数据。翻页模式时，第n页展示哪些数据，后端告诉前端，前端进行展示。如果删除了n页的3条数据，想要用第n+1页的3条数据自动补齐的效果，那就需要后端重新告诉前端新的第n页展示的是哪些数据，也就是前端发起请求后端返回新的数据，也就是说：删除后如果想要即时补齐，需要刷新请求新数据。另外一种交互方式，就是删除了第n页的3条数据，本页面不会补齐新数据，例如一页展示20条数据，删了3条后只展示17条数据了。这种交互模式会有一种极端情况，把20条数据都删除了，那页面就会为空。如何解决这个问题？可以通过占位符提示用户“暂无数据，可手动刷新”，或做一个判断，当该页面删除了所有数据就刷新一下？

5、删除数据，滚动模式不存在上面的问题，因为滚动模式没有固定的第n页，也没有每页多少条数据。

6、上面分别讨论了有新数据进来，删除数据的情况。有一种复杂的情况就是：删除了数据同时也有新的数据进来。页面呈现的数据是只有其中的一种操作的结果，还是两种综合的结果？其实也简单了，总的来说，就是看有没有刷新数据。如果再次请求后端肯定是综合的结果，如果不刷新重新请求后端，那就可能只有删除后的结果。

7、大家会发现一个小细节：分页的时候批量选择当前页面的一些数据，切换页面后，刚才的勾选操作会全部被清空。
无论分页和滚动，都只能操作当前页面的数据或当前已加载出来的数据。切换页面会重新请求新的数据，刚刚操作的第n页的数据已经不是现在的第n页了，因为可能一些数据已经不在了。

二、体验角度分析翻页和滚动

翻页适用场景：

1、内容检索场景，例如浏览器搜索等对检索需求较高的场景。

用户对内容的检索需求较高，需要为用户分批展示搜索结果，并给了用户的时间去思考选择自己想要的内容。

2、精准定位和带有明确内容倾向的场景。

因为每一页的内容数量上都是一致的，二次进入能够精准找到上次停留的位置及目标内容，也能够快速找到历史内容。相较于无穷无尽、没有页面感和数量感的瀑布流更合适。

3、B端产品还会有页面数据量的控制功能，用户能够精准把握单页内容的加载量。

交互方面，翻页需要考虑，删除第n页整页数据后，是会定位到第1页，还是n-1，还是新。同理，最后一页的情况页要考虑。

滚动适用场景：

操作流程不易被打断，没有间断的思考间隔，极易营造一种沉浸式的体验，让用户有一种停不下来的感觉。

依据加载更多内容是是否需要点击操作，瀑布流可以分为以下两类：
· 自动式瀑布流：即分段式瀑布流，到达某个临界处，滑动触发页面加载后续内容，用户不需要点击操作；
· 手动式瀑布流：手动式瀑布流需要用户手动点击页面底部的加载更多按钮后才能获得更多信息。

滚动加载的缺点

1、不能定位检索特定信息

2、页脚和侧边滚动条功能难用，因为针对的不是全部内容，而是当前加载到的数据里的

3、难以回溯已阅信息

补充

针对网上有人说的一些滚动加载的缺点，对于B端的数据列表展示，问了开发，不存在以下问题：

1、技术短板，首先其对设备硬件要求较高，长时间的在同一个页面中加载资源内容，当前页面会下载大量的缓存内容，页面的响应速度就会减慢，进而影响用户体验，只有退出应用和浏览器并清空缓存才能恢复。

2、无法估算内容总量（因为，无论翻页还是滚动B端数据列表会返回总量）

三、综合方案

考虑到翻页点击会影响体验，有一种方案是将翻页和滚动的点击加载合并一起，点击底部的加载更多，效果等同于自动翻页。“加载更多”=“下一页”，只是页面不会中断，页码会自动增加。

但是网上滚动，即查看已阅内容，就需要根据内容定位自动减少页码了。

这种方案应用的比较好的，就是长文章，比如读书类APP，可以无限向下滚动，但是同时内容也是根据目录定位的。