排查路径:
- 开启
refresher-enabled
属性 - 使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给 <scroll-view> 添加
white-space: nowrap;
样式 - 父元素不要设置 css 属性:
overflow: hidden
- 一定要使用 snake-case 格式!即:
<scroll-view></scroll-view>
,不要使用驼峰格式:<ScrollView></ScrollView>
,巨特么坑!
<template><view class="viewport"><!-- 注意必须是 snake-case,否则会不生效 --><scroll-view class="scroll-view" refresher-enabled scrollY><!-- 轮播图 --><MySwiper class="my-swiper" :customStyle="{width: '100vw',height: '300rpx'}" :data="swiperInfos" /><!-- 分类面板 --><CategoryPanel :data="categoryInfos" /></scroll-view></view></template><style lang="scss" scoped>
.viewport {height: 100vh;display: flex;flex-direction: column;.scroll-view {flex: 1;overflow: hidden;}
}
</style>