uniapp scroll-view布局下拉刷新页面布局问题

丢了猫的鱼

已于 2025-03-13 17:14:08 修改

阅读量443

点赞数 4

文章标签： uni-app

于 2025-03-13 17:08:45 首次发布

本文链接：https://blog.csdn.net/jiaxiaohong_csdn/article/details/146236067

版权

一、问题描述
1.项目中很多地方都用到了滚动scroll-view组件，比如列表，详情都会用到，先说下我的布局，

<view class="custom-container">
  <!-- #ifdef MP -->
  <view
    class="custom-navbar"
    :style="{
      'padding-top': menuButtonBounding.top + 'px',
      height: menuButtonBounding.height + 'px',
      zIndex: 1000,
    }"
  >
    <view class="nav-wrap">
      <text class="iconfont icon-back_light" @click="back"></text>
      <view class="navbar-title">xxxxx</view>
    </view>
  </view>
<!---占位元素（custom-navbar设置的fixed定位）-->
  <view
    class="custom-navbar-block"
    :style="{ height: menuButtonBounding.bottom + 'px' }"
  ></view>
  <!-- #endif -->
<scroll-view
      scroll-y="true"
      class="scroll-container"
      @scrolltolower="onLoadMore"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="refresherTriggered"
    >
</scroll-view>
</view>

2.样式部分：

// 总页面盒子设置
.custom-container {
        width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
// 导航样式设置
.custom-navbar {
        width: 100vw;
        padding-bottom: 20rpx;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
}
// 滚动区域 方案一、
.scroll-container {
   height:0;
   flex:1;
}

如果不设置height:0的话当滚动区域内容多会导致占位元素.custom-navbar-block高度压缩为0且页面无法正常下拉滚动，即使给custom-navbar-block设置flex-shrink:0,该占位元素高度不给压缩为0了，滚动仍不正常，因为scroll-container会随页面滚动；
设置了height:0后理论上这个元素不应该占据任何垂直空间，完事flex:1 会占据父元素除了占位元素.custom-navbar-block以外的剩余空间，即使滚动也在该空间内滚动，不会随页面滚动导致下拉异常；

// 方案二、
.scroll-container {
   overflow-y: auto;
   flex:1;
}

因为flex:1 会占据父元素除了占位元素.custom-navbar-block以外的剩余空间，overflow: auto 确保了当 .scroll-container 内的内容超出其可见区域时，能够显示滚动条。
三、其实方案一height:0这个感觉还是挺神奇，有丢丢不理解,有大佬给再解答一下不？