AI 写出来的数据列表，测试的时候只有十几条，怎么滑都正常。等真实数据一多，往下翻，后面的内容出不来；系统里已经有新记录了，页面上却还是旧的。你明知道这个交互不对，却不知道该怎么让 AI 改？
一天一个 vibe coding 术语课，今天讲下拉刷新和加载更多。
一、什么是下拉刷新和加载更多？
比如你打开刚才那个数据列表，页面先显示二十条记录。
这时候，系统里又多了一条新数据，但页面上还看不到。
用户回到列表顶部，按住页面往下拉。松手以后，新数据出现在列表里。
这个动作叫下拉刷新，英文 pull to refresh。
同一份列表里其实还有几百条数据。
用户看到第二十条以后，页面又拿回下一批，接在原来的内容后面。
这叫加载更多，英文 load more。把新拿回的内容接到旧内容后面，技术文档里还经常叫追加，英文 append。
你打开资讯首页，刷新以后，刚发布的新闻会出现在最前面。
换成社交动态或消息列表，刷新以后回来的可能是刚发出的动态，或者刚收到的一条消息。
用户继续往下看，商品列表、搜索结果、评论区和历史记录后面往往还有很多。加载更多会把后面的商品、评论和记录一批批接出来。
反过来，内容很少、一次就能显示完，就没有必要做加载更多。内容不会发生变化，也没有必要专门提供刷新。
二、这套交互由顶部、列表和底部组成
用户想看那条新数据，回到这二十条的顶部，按住再往下拉。列表顶部会露出刷新区。
还没拉到触发位置时，这里可以显示「下拉刷新」。拉过触发位置，提示变成「松开刷新」。
刷新真正开始以后，顶部会留下一个刷新指示器，告诉用户内容正在更新。
刷新指示器属于加载指示器，英文 loading indicator。
如果它长成一圈不停旋转的小圆圈，这种样子叫转圈图标，英文 spinner。
订单、报表和数据看板还可以在刷新区附近显示「最后更新于几点几分」。只有数据时效很重要时，这行文字才有用，不是每个列表都要放。
刷新区下面，就是用户正在看的那二十条。
用户滑过这二十条，快到列表底部时，下面是加载更多区。它可以放一个「加载更多」按钮，也可以在用户接近列表底部时自动触发。
下一批数据正在读取时，底部显示加载指示器和「正在加载」。
如果加载失败，这里就换成失败提示和重试入口。
后面已经没有数据时，这里显示「没有更多了」，不再继续加载。
页面第一次打开，一条内容都还没有时，用的是整块内容的加载反馈。
已经有内容以后再刷新，反馈放在顶部。
继续加载下一批，反馈放在底部。
这三种等待的位置不同，因为它们分别在告诉用户：整份内容还没来、当前内容正在更新、后面的内容还在读取。
三、刷新是更新当前结果，加载更多是继续往后接
位置分清以后，还要分清这两个动作会怎样改变列表里的内容。
你正在看「待发货订单」，刷新了一次。
刚付款的新订单可能出现在前面。
已经发货的订单不再符合「待发货」，可能从列表里消失。
原有订单的备注、付款时间和状态也可能发生变化。
这些都是刷新的正常结果。刷新不只是在顶部塞进几条新数据，而是把当前条件下的结果更新一遍。
结果可以变，用户刚才选的条件不能变。
用户筛选的是「待发货」，刷新以后就还应该是「待发货」。
用户按价格从低到高排列商品，刷新以后也不该偷偷变回默认排序。
用户搜的是「无线耳机」，刷新以后还应该是「无线耳机」的结果，不能退回全部商品。
加载更多不是重新换一份结果，而是沿着当前结果继续往后接。
同一批「无线耳机」，第一屏看到二十件商品。
继续往下看，第二批商品应该接在这二十件后面。
前面看过的内容不能消失，页面也不能突然跳回顶部。
如果用户从「全部商品」切换到「只看有货」，结果已经换了。
这时页面应该重新显示第一批有货商品，不能把它们接在原来的全部商品后面。
刷新和加载更多还要避免重复内容。
同一条数据刷新回来一次，加载更多又回来一次，在列表里仍然只应该出现一次。
刷新失败，要保留用户刚才还能看的内容。
加载下一批失败，也要保留已经加载出来的部分，只在顶部或底部告诉用户这一次没有成功。
刷新成功后，当前条件下确实一条结果都没有，页面应该显示「没有符合条件的内容」。
这是空结果，不是刷新失败。
四、上拉、触底、无限滚动和加载更多按钮不是一回事
加载更多说的是把下一批内容接上来。怎么触发这一步，则有几种不同做法。
有些手机页面到达列表底部以后，还要继续向上拖一段。
底部先显示「上拉加载更多」，拖过触发位置以后变成「松开加载更多」。用户松手，下一批内容才开始加载。
这才是字面意义上的上拉加载更多。
有些页面不需要再往上拖一下。
用户只要滑到列表底部，或者接近底部，下一批内容就会自动加载。这更准确地叫触底加载。
如果每次接近底部都会自动追加，页面就可以一直往下滚动。
这种形式叫无限滚动，英文 infinite scroll。
另一种做法，是在底部放一个明确的「加载更多」按钮。
用户点一次，列表接上下一批。这叫加载更多按钮，英文 load more button。
资讯流、社交动态和推荐内容，用户通常是连续往下看。自动触底加载和无限滚动可以让浏览不被按钮打断。
商品、搜索结果和资料列表里，用户经常要停下来比较、改筛选，或者查看页面底部的其他入口。
这类页面更适合使用加载更多按钮。用户可以自己控制节奏，页尾也不会刚出现就又被新内容推走。
有些用户还需要知道自己在第几页、跳到某一页，或者把这个位置分享给别人。
这类情况更适合使用分页，英文 pagination。
不管选哪一种，用户打开一条详情再返回列表时，前面已经加载的内容和刚才看到的位置都应该尽量保留。
否则用户翻了八十条，点进去看完再返回，又得从第一条开始。
五、下拉刷新主要用在手机和平板上
加载更多可以用按钮、触底等不同方式触发，下拉刷新则更依赖触摸手势。
手机和平板靠手指直接拖动列表。用户回到顶部，再继续往下拉，页面就能顺着手势露出刷新区。
电脑网页主要使用鼠标和键盘，用户通常不会在列表顶部继续往下拖。
普通网页的内容不需要单独更新时，可以不放刷新按钮。用户想重新加载整个页面，还可以使用浏览器自带的刷新。
浏览器刷新会重新加载整个网页，不等于只刷新当前列表。
它还可能让筛选条件、滚动位置和没提交的输入回到初始状态。
数据看板、订单列表和消息列表，有时只需要更新当前这块内容。
这时电脑网页更适合在标题栏或者工具栏里放一个刷新按钮，不用重新加载整个页面。
桌面客户端没有浏览器刷新可以依赖。
内容需要手动更新时，就要提供刷新按钮、菜单命令或者快捷键。
聊天、行情和实时看板可能会自动更新。它们的新数据自己进入页面，不用等用户下拉或点按钮。
下拉刷新藏在手势里。
页面使用它时，还应该给无法使用手势的人留一条能直接操作的刷新路径，例如菜单里的刷新项或者单独的刷新按钮。
下拉刷新管的是「这份列表现在应该变成什么样」，加载更多管的是「这份列表后面还有什么」。
