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));
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐