小红书式横向标签栏的核心是 scroll-view 实现可滚动、高亮当前、点击居中跳转及拖动同步激活，需设固定高度、scroll-x、scroll-left 控制偏移，用 createSelectorQuery 动态计算位置，监听 @scroll 实时更新激活态，并适配 iOS/安卓平台差异。
uni-app 中用 scroll-view 实现横向标签滑动
小红书式标签栏的核心是「可滚动 + 高亮当前 + 点击跳转 + 同步滚动位置」，uni-app 里最稳妥的做法就是用原生 scroll-view，而不是靠 swiper 或 CSS overflow: scroll 模拟——后者在 iOS 和部分安卓 WebView 下容易卡顿、滚动不灵敏、无法精确控制偏移量。
关键点在于：必须给 scroll-view 设置固定高度（哪怕只是 1px），并开启 scroll-x，同时禁用 enable-flex（否则子元素 flex 布局可能被干扰）：
<scroll-view class="tag-scroll" scroll-x="true" :scroll-left="scrollLeft">\n <view v-for="(tag, i) in tagList" :key="i" class="tag-item" @click="selectTag(i)">{{ tag }}</view>\n</scroll-view>-
scroll-left绑定一个响应式变量（如scrollLeft），用于手动控制滚动位置 - 每个
tag-item需设固定宽度（比如width: 120rpx）或用flex-shrink: 0防止压缩 - 不要用
v-for直接遍历对象，确保tagList是数组，否则索引不可靠
点击标签后自动居中并高亮
用户点击某个标签，不仅要选中它，还要让该标签居中显示（尤其在屏幕较宽、标签较多时）。uni-app 没有内置「滚动到元素中心」API，得自己算偏移量：
假设每个 tag-item 宽度为 120rpx，容器宽度为 750rpx（全屏），第 i 个标签的左边缘位置是 i * 120，目标居中位置就是 i * 120 - (750 - 120) / 2。实际代码里建议用 uni.createSelectorQuery() 动态获取元素位置，避免硬编码：
this.$nextTick(() => {\n const query = uni.createSelectorQuery().in(this);\n query.select(`.tag-item:nth-child(${i + 1})`).boundingClientRect();\n query.exec(res => {\n if (res[0]) {\n this.scrollLeft = res[0].left - (uni.getSystemInfoSync().windowWidth / 2) + res[0].width / 2;\n }\n });\n});- 必须用
$nextTick确保 DOM 已更新，否则query找不到新渲染的节点 -
uni.getSystemInfoSync().windowWidth返回的是 px 单位，而 rpx 计算需注意：若你用的是 rpx，最好统一转成 px（通过uni.upx2px）或直接用 rpx 布局 +scroll-left也用 rpx（uni-app 会自动转换） - 高亮状态建议用
:class绑定，比如:class="{ 'tag-active': activeIndex === i }"
滚动过程中同步更新当前激活标签
用户手指拖动标签栏时，需要实时判断哪个标签处于可视区域中心，并设为激活态。这不是靠 scroll-into-view 能解决的——那个只适用于跳转，不响应拖动事件。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
正确做法是监听 scroll-view 的 @scroll 事件，读取 detail.scrollLeft，再遍历所有标签的 left 值，找出距离中心最近的那个：
@scroll="onScroll"
然后在 onScroll 里：
onScroll(e) {\n const scrollLeft = e.detail.scrollLeft;\n const center = scrollLeft + uni.getSystemInfoSync().windowWidth / 2;\n let minDist = Infinity;\n let targetIndex = 0;\n\n this.tagRects.forEach((rect, i) => {\n const dist = Math.abs(rect.left + rect.width / 2 - center);\n if (dist < minDist) {\n minDist = dist;\n targetIndex = i;\n }\n });\n\n if (targetIndex !== this.activeIndex) {\n this.activeIndex = targetIndex;\n }\n}-
tagRects需提前用createSelectorQuery批量获取所有标签的boundingClientRect并缓存，否则每次滚动都查 DOM 性能爆炸 - 别在
@scroll里直接调createSelectorQuery，会触发频繁重排 - 可以加节流（
setTimeout+ 标志位），但注意不能丢帧，否则高亮滞后明显
真机上 iOS 滚动回弹与安卓惯性差异
uni-app 的 scroll-view 在不同平台表现不一致：iOS 默认有强回弹，安卓则惯性弱、易停顿。如果希望体验统一，得针对性处理：
- iOS 上可通过
bounces="false"关掉回弹，但会损失“拉到底”的反馈感；更推荐保留，仅在检测到platform === 'ios'时微调scroll-left计算逻辑（比如减去回弹偏移） - 安卓上若滚动卡顿，检查是否启用了
enhanced属性（HBuilderX 3.6+ 支持），设为true可启用原生滚动加速 - 所有滚动操作尽量用
this.$nextTick包裹，避免因 Vue 异步更新导致位置错乱 - 别用
scroll-into-view+ ID 方式做跳转——在长列表里它会强制滚动到底部，且无法控制速度和缓动
横向标签滚动看着简单，真正做到顺滑、精准、跨端一致，核心不在布局而在时机控制和平台特性适配。最容易被忽略的是：滚动过程中的激活态更新必须基于真实 DOM 位置计算，而不是靠索引推断——标签宽度不一、字体缩放、动态插入都会让索引失准。
