关注列表页面需容器元素（如<div id="follow-list">）、API接口、JS动态渲染逻辑，支持加载状态、空列表、错误提示及取关交互，禁用纯HTML静态写死。
关注列表页面需要哪些基础结构
纯 HTML 无法动态加载用户数据，必须配合 JavaScript（或服务端渲染）才能展示真实的关注列表。直接写死的 <ul><li> 只能当静态示例用，上线即失效。
真实场景下，你至少要准备：
- 一个容器元素，比如
<div id="follow-list"></div>，留给 JS 注入内容 - API 接口地址，例如
/api/v1/users/123/following，返回 JSON 格式的关注用户数组 - 前端需处理加载状态、空列表、错误提示——这些都不能靠 HTML 标签解决
用 fetch 渲染关注列表的最小可行代码
假设后端返回形如 [{"id":456,"name":"张三","avatar":"/a.jpg"},{"id":789,"name":"李四","avatar":"/b.jpg"}] 的数组，JS 渲染逻辑应这样写：
<script>
fetch('/api/v1/users/123/following')
.then(r => r.json())
.then(data => {
const container = document.getElementById('follow-list');
container.innerHTML = data.map(u =>
`<div class="user-item">
<img src="${u.avatar}" alt="${u.name}" width="40">
<span>${u.name}</span>
<button onclick="unfollow(${u.id})">取关</button>
</div>`
).join('');
});
</script>
注意：unfollow 是你要自己实现的函数，不能只靠 HTML 绑定 onclick 就完事；container.innerHTML = ... 是最快方式，但若列表含表单或事件监听器，得改用 document.createElement 避免丢失绑定。
立即学习“前端免费学习笔记（深入）”；
为什么不用 <template> 或 innerHTML 拼接都容易出问题
常见翻车点不是语法错，而是上下文缺失：
-
<template>本身不渲染，必须用content.cloneNode(true)才能复用，新手常漏掉.cloneNode导致后续插入时节点被移走 - 直接拼接字符串进
innerHTML会丢掉已绑定的事件（比如之前给某个按钮加的addEventListener），且存在 XSS 风险——如果u.name含<script>，就会执行 - 没做 loading 状态，网络慢时页面空白几秒，用户以为卡了
移动端关注列表要额外注意什么
关注列表通常滚动频繁，DOM 节点多时性能会明显下降：
- 别一次性渲染全部用户，用「懒加载」或「虚拟滚动」——比如只渲染可视区域 ±2 屏的内容
- 头像图片必须加
loading="lazy"，否则长列表会触发大量无意义请求 - 避免在
scroll事件里直接调fetch，要用节流（throttle）或 IntersectionObserver 判断是否到底部 - Android WebView 对
position: sticky支持差，想固定“已关注”标签栏时慎用
最常被忽略的是：关注关系变更（如点击取关）后，仅更新 UI 不够，必须同步调用取消关注接口并校验返回状态，否则会出现“界面上已消失，但实际仍关注”的错乱。
