应预设字号class、固定色值数组并降级为横向滚动，词云需置于可滚动区且避免与吸顶导航同层，点击后需手动focus并清除防抖定时器，iOS存储要过滤Unicode控制字符并加try/catch。
uni-app 里搜索历史词云怎么避免渲染卡顿
直接用 v-for 渲染一堆带随机字号/颜色的 <view></view>，低端安卓机上容易掉帧，尤其超过 15 条后明显卡顿。核心不是“云”要多炫，而是控制渲染粒度和计算时机。
- 别在模板里写
:style="{ fontSize: Math.random() * 20 + 12 + 'px' }"—— 每次重绘都重新算，CPU 白耗 - 预设三档字号 class：
size-xs、size-sm、size-lg，用数组映射词频或索引取值 - 颜色提前在
data里生成好固定数组（比如 10 种色值），按index % 10取，不现场Math.random() - 历史词超 15 条时，果断降级为横向
<scroll-view scroll-x="true"></scroll-view>，比强行撑“云”更稳
吸附式标签栏和词云布局怎么共存不打架
词云本身不吸附，但如果你把词云放在一个“吸顶导航栏”下方，就容易因滚动监听冲突导致定位错乱或样式重叠。关键在于分清容器层级和滚动源。
- 词云区域必须独立于吸顶导航栏——它属于内容区，不是导航栏的一部分；否则
position: fixed或sticky会把它一起钉住，点击后无法自然滚动到对应位置 - 如果整个页面用原生滚动（
onPageScroll），词云外层容器别设position: sticky，否则 iOS 下可能失效或错位 - 推荐结构：
<view class="sticky-header">...</view>（吸顶导航） +<scroll-view><view class="history-cloud">...</view></scroll-view>（词云在可滚动区内） - 词云容器加
display: flex; flex-wrap: wrap; justify-content: center;，每个词用flex-shrink: 0防压缩变形
点击词云标签后 input 不聚焦、不更新怎么办
这不是词云的问题，是 input 的受控机制和平台差异叠加导致的静默失败。iOS 和安卓表现还不一样，光赋值变量远远不够。
- 确认
v-model绑定的变量名和你点击时赋值的变量**完全一致**（大小写、下划线、拼写），例如v-model="searchValue"就不能写成this.searchText = word - 赋值后必须加
this.$nextTick(() => this.$refs.inputRef?.focus())，尤其安卓真机不手动 focus 就不弹键盘 - 如果用了防抖搜索（
setTimeout），点击历史词前先clearTimeout(this.timer)，否则可能延迟触发旧关键词 - App 端建议监听
@confirm而非@keyup.enter，后者在部分机型上不可靠
为什么 iOS 上词云点了没反应，Android 却正常
iOS 的 uni.setStorageSync 在某些条件下会静默失败：不报错、不抛异常、也不写入，但数据就是没存上。词云渲染依赖历史数据，源头断了，自然空着。
- 检查关键词是否含 Unicode 控制字符（如
\u2028、\u2029），JSON 序列化时会被截断，存之前统一过滤：keyword.replace(/[\u2028\u2029]/g, '') - 别把整个 history 数组拼成字符串再存，老老实实用
uni.setStorageSync('searchHistory', historyArray) - 加
try/catch兜底并打日志：try { uni.setStorageSync(...) } catch(e) { console.warn('save failed:', e) } - 读取时始终带默认值：
const history = uni.getStorageSync('searchHistory') || []，避免null导致后续操作崩溃
词云布局本身很简单，难的是让它在不同端稳定响应、不拖慢滚动、不和吸顶逻辑互相干扰。最容易被忽略的是：iOS 静默失败不会告诉你错了，安卓光标不聚焦不会报错，v-model 名对不上 UI 就不动——这些都不是 bug，是跨端开发里必须手动兜住的细节。
