微博多级话题选择需支持自由跳级、跨层多选、动态搜索及层级语义，uni-data-picker因单路径设计、无跨层多选和搜索能力而不适用；正确方案是基于scroll-view自研可折叠树组件，手动管理展开态与选中态。
微博发布页的「多级话题选择」不是简单嵌套下拉，而是「可自由跳级 + 多选 + 支持搜索 + 话题带层级语义」的组合交互。直接用 uni-data-picker 或纯 picker-view 都做不到——前者只支持单路径选择，后者无法多选且难扩展搜索。
为什么不能用 uni-data-picker 做多级话题选择
它本质是「单路径级联」组件，设计目标是省→市→区这种唯一路径结构。而微博话题是树形+网状混合：比如「#科技#」下有「#AI#」「#芯片#」，但用户可以跳过「科技」直接选「#大模型#」，甚至同时选「#AI#」和「#游戏#」（无共同父节点）。它的 multiple 属性只对同级生效，不解决跨层多选问题。
-
uni-data-picker的value是扁平数组，但无法表达「#AI# 属于 #科技#」这种归属关系 - 它不提供搜索入口，也没法在展开时动态加载子话题（比如输入“云”后才拉取「#云计算#」「#云原生#」）
- 选中态无法分层高亮：你点了「#AI#」，父级「#科技#」不该自动勾选，但需要视觉提示其存在上级
正确做法：用 scroll-view + 动态树节点 + 手动维护选中状态
核心是把话题数据当「可折叠树」渲染，每层独立滚动、独立控制展开/收起，选中状态存在一个对象里，键为话题 id，值为完整节点信息（含 parentId 和 level）。
- 数据结构必须带
id、name、parentId、children（哪怕为空数组），不能只靠嵌套深度判断层级 - 第一层节点始终展示；点击带
children的节点时，才懒加载或展开下一层（避免一次性拉全量） - 每个话题项用
checkbox或自定义view+data-id，点击时更新selectedTopics对象，不依赖 v-model 绑定 - 搜索逻辑单独实现：过滤所有节点（含隐藏子节点），匹配成功则自动展开其所有父级，并高亮关键词
示例关键代码片段：
// data
selectedTopics: {}, // { '1001': { id: '1001', name: '#AI#', parentId: '101' }, ... }
expandedIds: new Set(['1', '101']), // 控制哪些父节点已展开
<p>// methods
toggleTopic(id, node) {
if (this.selectedTopics[id]) {
this.$delete(this.selectedTopics, id)
} else {
this.$set(this.selectedTopics, id, { ...node })
}
},</p><p>expandNode(id) {
this.expandedIds.add(id)
// 若 children 为空，这里触发接口拉取子话题
if (!node.children || node.children.length === 0) {
this.loadChildren(id)
}
}
</p>
容易踩的坑：父子联动误判和跨端样式断裂
很多人试图让「选中子话题时自动选中父话题」，这是错的——微博场景中，用户明确只选「#Transformer#」，不代表要带上「#AI#」或「#科技#」。父子关系只用于导航路径，不用于选中继承。
- iOS 微信小程序里
scroll-view嵌套滚动卡顿：给每层加scroll-y同时设style="height: 200px;"，禁用弹性滚动（enable-flex设为 false） - H5 端 checkbox 样式不一致：别用原生
checkbox，统一用view+class模拟，通过data-checked控制状态 - 话题名含空格或特殊符号（如 #前端开发# vs #前端 开发#）：正则匹配时用
/#([^#\n\r\t\f\u2028\u2029]+?)#/g，比.*?更安全
最易被忽略的是「取消选择后如何恢复初始视图」：用户清空所有话题，不能只清 selectedTopics，还得重置 expandedIds 并滚动到顶部——否则下次打开还在之前展开的某层，体验断裂。
