小红书式分类页必须采用三层结构：顶部tab用scroll-view横向滚动，中间用swiper承载页面，每个页面内嵌独立scroll-view纵向滚动；缺一不可，否则手势冲突或滚动失效。
scroll-view + swiper 组合必须分层设计
小红书式分类页本质是「横向 Tab 切换 + 纵向内容滚动」的嵌套结构，不能只用一个 scroll-view 或只靠 swiper 堆砌。核心分层是：顶部 Tab 栏（横向滚动）、中间容器（swiper 承载多个页面）、每个页面内独立 scroll-view（纵向滚动内容）。漏掉任一层，手势冲突或滚动失效就会立刻出现。
常见错误是把所有分类项塞进一个 scroll-view 并试图用 scroll-left 控制 Tab 位移——这会导致 iOS 下 touch 事件被拦截、H5 端跳位、安卓低端机卡顿。
- Tab 栏必须用
scroll-view+scroll-x="true"，且父容器显式设width和white-space: nowrap - 每个 Tab 对应的页面必须用
swiper-item包裹，不能用view+v-if切换 - 每个
swiper-item内部必须用独立scroll-view，禁用scroll-y="false"或省略属性 -
swiper的current必须绑定 Number 类型变量，传字符串如"1"会导致切换失败
scroll-end 是唯一可信的联动校准时机
右侧内容滚动时，左侧 Tab 高亮同步不能依赖 @scroll 实时计算 —— 快速滑动下 scrollTop 抖动剧烈，加上字体渲染差异和 padding 影响，判断极易出错。真正稳定的做法是只在 @scrollend 触发后，用 uni.createSelectorQuery() 查当前可视区域中心点对应的分类节点。
注意：H5 端首次查询常返回 height: 0，必须加双保险：this.$nextTick(() => setTimeout(() => { /* query */ }, 100))；小程序端 id 只能用小写字母+数字，如 tab-0，含下划线或大写会令 scrollIntoView 失效。
- 每个 Tab 项模板写成
<view :id="'tab-'+index" :key="item.id"></view> - 滚动结束时查所有节点位置，用
scrollTop + scrollHeight / 2作为基准比对，避免交界处抖动 - 查询结果存入
this.tabTopList数组，后续直接二分查找，别每次重复 query - 节流至少 300ms，否则低端安卓机频繁调用
createSelectorQuery会丢帧
横向 Tab 滚动居中要用 scroll-into-view 而非 offsetLeft
点击某个 Tab 时，想让它居中显示，千万别手动算 target.offsetLeft 然后赋值给 scroll-left —— H5 和小程序返回值不一致，iOS 渲染延迟还会取到旧布局数据，结果就是跳偏或卡住。
面向 K12 语文学科的小红书笔记生产工作流。用于根据内容日历或家长痛点选题，核对教材版本与课文证据，把阅读、古诗文、习作等抽象方法落到真实课文、公式、例题和家长可执行动作，并产出标题、3:4 轮播卡片方案、生图提示词、可直接粘贴发布的正文及对抗性验收报告。用户提到小学语文、初中语文、课文解析、语文预习、阅读理解、古诗、作文、小红书图文或教育内容生产时使用。
正确做法是给每个 Tab 项加固定宽度（如 160rpx），配合 scroll-into-view 属性驱动滚动，再用 :key 防止 Vue 节点复用导致 id 错乱。
- Tab 容器上绑定
:scroll-into-view="scrollIntoViewId" - 点击时执行
this.scrollIntoViewId = 'tab-' + index，不要手动改scroll-left - 若 H5 端仍有跳位，把赋值包在
this.$nextTick(() => { this.scrollIntoViewId = ... })里 - 子项必须用
display: inline-block，禁用 flex 布局，否则安卓低版本会错位压缩
隐藏滚动条但保留拖拽需分端处理
用户需要“看不见滚动条，但能拖拽”，这个需求在各端实现方式完全不同：iOS 和 Android App 可通过 CSS 隐藏，但微信小程序必须用 show-scrollbar="false" 属性，H5 则要靠伪元素覆盖。混用一套样式必然失败。
最稳妥的是在 app.vue 全局样式里统一处理，其他页面无效；且不能只写 ::-webkit-scrollbar { display: none }，H5 还得加 overflow: overlay 配合。
- App 端（iOS/Android）：CSS 中写
::-webkit-scrollbar { width: 0; height: 0; } - 微信小程序：
scroll-view上加show-scrollbar="false" - H5：除了伪元素，还要给
scroll-view加style="overflow: overlay" - 真机调试时，HBuilderX 必须关闭「启用滚动区域优化」，否则 iOS 会拦截 touch 事件
实际联动逻辑里最容易被忽略的，是「滚动结束后的边界校验」——当用户快速滑到底部又回弹，scrollend 触发时 scrollTop 可能还没稳定，此时查节点位置仍可能偏差。建议在 scrollend 回调里加一次 setTimeout(() => { /<em> 再查一次 </em>/ }, 50) 做兜底。
