uniapp scroll-view 不生效排查
排查路径:
- 开启
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>