uniapp 中scroll-view高度适配问题

2022-07-29,,,

scroll-view 文档中要设置 固定高度,但设置100%高度 不生效 针对此,通过百度找到一下解决方式 拯救于水火之中

一下内容为整合网上优质 答案以及 自己发挥

<view class="view-content">
    <scroll-view scroll-y="true" class="sv">
    //内容
    </scroll-view>
  </view>

// css 样式

<style lang="scss" scoped>
 
 .view-content {
  height: 100%;
  flex-grow: 1;
  .sv{
    height: calc(100vh - 150rpx - env(safe-area-inset-bottom));  // 这是主要
    flex-grow: 1;
  }
 }

150rpx 可根据手机需要进行调节 值越大 底部留出的空间越大
height: calc(100vh - 150rpx - env(safe-area-inset-bottom));

本文地址:https://blog.csdn.net/weixin_42634398/article/details/109241072

《uniapp 中scroll-view高度适配问题.doc》

下载本文的Word格式文档,以方便收藏与打印。