uniapp scroll-view 不生效排查

最新推荐文章于 2025-06-06 10:45:25 发布

写BUG天花板

最新推荐文章于 2025-06-06 10:45:25 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/qq_38074398/article/details/144548351

前端专栏收录该内容

9 篇文章

订阅专栏

排查路径：

开启 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>