MOBILE UI
下拉刷新Pull to Refresh
列表顶部下拉时 spinner 被拉出来，松手转两圈后新内容落下。
效果预览
适合用在哪
信息流、消息列表、数据看板的移动端。
容易踩的坑
- 未设 overscroll-behavior-y:contain，自定义刷新与浏览器原生下拉同时触发、刷新两次。
- 下拉是唯一刷新方式，桌面和键盘用户无法更新列表。
- 刷新失败只是 spinner 消失不提示，用户以为已经是最新数据。
设计提示词 · Prompt
下拉刷新（Pull to Refresh）：列表顶部隐藏一个 spinner 区，touchmove 下拉时 spinner 跟手位移 + 旋转进度随拉距（0-64px 映射 0-360°），超过阈值 spinner 变色提示"可松手"；松手后 spinner 定住旋转、列表回弹留出刷新区，数据到达后新内容推入。手势与页面滚动冲突处理：只在 scrollTop===0 且向下时接管。Web 端注意与浏览器原生下拉刷新冲突（Chrome Android 可用 overscroll-behavior-y:contain 关掉原生的）。现代变体：品牌 logo 变形动画替代 spinner。
Pull to Refresh: Hide a spinner area at the top of the list; while pulling down on touchmove, the spinner follows the finger and its rotation progress tracks the pull distance (0-64px maps to 0-360°); past the threshold the spinner changes color to signal "release now"; after release, the spinner stays and spins while the list springs back leaving room for the refresh area, and new content pushes in once data arrives. Gesture vs. page scroll conflict: take over only when scrollTop===0 and pulling downward. On the web, watch for conflicts with the browser's native pull-to-refresh (on Chrome Android, disable the native one with overscroll-behavior-y:contain). Modern variant: replace the spinner with a morphing brand logo animation.
常见搭配
同一页面里经常和「下拉刷新」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs" style="display:flex;justify-content:center;background:var(--i-bg2)">
<div class="d-pullwrap">
<span class="d-pullwrap__spinner"></span>
<div class="d-pullwrap__list">
<span class="d-pullwrap__ln" style="width:88%"></span>
<div class="d-img d-img--cool" style="height:26px"></div>
<span class="d-pullwrap__ln" style="width:70%"></span>
<span class="d-pullwrap__ln" style="width:80%"></span>
</div>
</div>
</div>