scroll-view横向滚动需设width和white-space: nowrap;子项用inline-block固定宽;swiper替代更稳;吸顶须bindscroll手动实现,禁用sticky;联动需offsettop精确映射与双向同步。

scroll-view横向滚动必须设width和white-space: nowrap
不设宽度,scroll-view在iOS和部分安卓WebView里根本不会滚动;只开scroll-x="true"没用。常见翻车是子项用flex或默认block,导致换行、横向失效。
必须显式给scroll-view设width(比如100%),并加white-space: nowrap;子项统一用display: inline-block且固定宽度(如120rpx),不能靠flex: 1自适应。
-
scroll-view外层容器不要设overflow: hidden,否则会截断滚动内容 - 子项
margin建议用rpx单位,避免不同屏幕缩放错位 - 安卓低端机上
scroll-x偶现回弹,优先考虑用swiper替代(见下一条)
用swiper替代scroll-view做横向导航更稳
原生scroll-view在iOS上滑动不跟手、快速滑动时标签错位,本质是它把导航当连续滚动处理,而分类标签是离散选项——不该依赖滚动精度。
改用swiper,设scrollable="false"禁用手动滑动,只靠current控制高亮项,联动更准、体验更丝滑。
-
swiper-item里放单个标签,用v-for渲染,每个swiper-item宽度固定 - 点击标签时更新
current,触发swiper自动跳转,不依赖scroll-into-view - 配合
change事件监听切换,比scroll-end更可靠
吸顶必须用bindscroll手动控制,别信position: sticky
position: sticky在微信/支付宝/百度小程序里压根没实现,H5端也极易因父容器样式失效——不是你代码写错了,是平台不支持。
唯一全端兼容的方案:用scroll-view + bindscroll监听detail.scrollTop,动态切is-sticky class。
-
scroll-view必须设固定高度(如height: calc(100vh - var(--status-bar-height))),否则bindscroll不触发 -
offsetTop要在onReady或nextTick后取,Vue 3 的onMounted中DOM可能还没渲染完,直接取是0 - 吸顶后内容会上跳,必须加占位节点:
<view v-if="isSticky" class="placeholder" :style="{ height: headerHeight + 'px' }"></view>
吸顶+横向导航联动时容易漏掉的细节
横向导航本身吸顶,但内容区滚动时,还要同步高亮当前分类——这需要滚动位置与区块offsetTop映射,不是简单绑定current就能解决。
关键点不在“怎么吸顶”,而在“吸顶后怎么保持状态联动”。最容易被忽略的是:
- 所有
offsetTop查询必须用uni.createSelectorQuery().in(this),且exec()只调用一次,否则卡顿 - iOS微信小程序中,
fixed元素可能被键盘顶起,若导航含input,需监听keyboardheight动态调top - 节流必须用
requestAnimationFrame,不能用setTimeout,否则吸顶响应滞后 - 横向导航的
current和内容区滚动位置要双向同步,避免用户拖动内容后标签不同步











