scroll-view 必须显式设置 width 和 white-space: nowrap 才能实现稳定横向滚动,子项需用 inline-block 而非 flex;iOS 和部分安卓 WebView 中未设宽高则无法滚动,且需关闭 HBuilderX 的「启用滚动区域优化」;点击居中应使用 scroll-into-view + 静态 id 与 :key,避免 offsetLeft 计算偏差;滑动高亮校准应在 scroll-end 事件中通过 createSelectorQuery 获取位置;隐藏滚动条需分端处理:H5 用 ::-webkit-scrollbar,小程序用 show-scrollbar="false",并注意兼容性。

scroll-view 必须设 width 和 white-space: nowrap 才能横向滚动
不设宽高,scroll-view 在 iOS 和部分安卓 WebView 里根本不会滚动;只开 scroll-x="true" 不顶用。常见翻车是子项用 flex 或默认 block,导致换行、横向失效。
正确写法:scroll-view 父容器显式设 width: 100% 或具体值(如 width: 750rpx),并加 white-space: nowrap;子项统一用 display: inline-block,别用 flex——否则在低端安卓上会压缩错位。
- 每个分类项建议固定
width(如160rpx),避免文字长短不一造成居中偏移 - HBuilderX 真机调试时记得关闭「启用滚动区域优化」,否则 iOS 下可能拦截 touch 事件
- 不要把
scroll-view当普通 view 嵌套一堆未设样式的子 view,那只是“看起来能滚”
点击居中滚动别直接算 offsetLeft
用 target.offsetLeft 手动算 scroll-left 值,在 H5 和小程序返回结果不一致,尤其有 padding/margin 时偏差明显;iOS 上还容易因渲染时机问题取到旧值。
真正稳定的做法是用 scroll-into-view + 动态 id,但必须满足两个前提:id 静态可预测(如 cate-0)、且带 :key 防 Vue 节点复用。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit,触发小红书发布。
- 模板中每个分类 view 写成
<view :id="'cate-'+index" :key="item.id"> - 点击时赋值
this.scrollIntoView = 'cate-' + index,而不是手动改scroll-left - H5 端如果仍跳位,加
this.$nextTick(() => { })等 DOM 渲染完成再触发
二级分类联动滚动不能靠 scroll 实时推 current
监听 scroll 事件实时反推当前高亮项,性能差、误判率高——快速滑动时 scrollTop 取值抖动,加上 padding、字体渲染差异,很容易判定错项。
闲鱼式体验的可靠逻辑是:点击驱动 current,滑动仅作视觉反馈;唯一可信的校准时机是 scroll-end 事件,此时再用 uni.createSelectorQuery 查目标元素位置做兜底。
-
current必须是Number类型,传字符串会导致v-if判断失效 - 左侧一级分类滚动后,右侧二级列表用
scroll-into-view定位首个对应项,而非靠scrollTop计算 - 避免在
scroll中频繁调用节点查询,低端机易丢帧;节流至少300ms
隐藏滚动条但保留拖拽能力要分端处理
全局隐藏滚动条需在 app.vue 中声明样式,其他页面无效:
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
但该写法仅对 H5 有效;微信/支付宝小程序需额外设置 show-scrollbar="false" 属性,且真机表现不一致——iOS 微信基础库 ≥ 2.27.0 才支持该属性,低版本仍显示。
- 安卓端部分 WebView 会忽略
::-webkit-scrollbar,需配合overflow: hidden+ 外层容器遮盖 - 切勿在
scroll-view上同时设show-scrollbar="false"和 CSS 隐藏,某些安卓机型会彻底禁用拖拽 - 测试重点不是“有没有滚动条”,而是“手指拖拽是否响应”,尤其注意 OPPO/Vivo 等定制系统 WebView 行为


















