问答

【移动端】h5页面要求兼容各种机型一屏展示(不出现滚动条)

作者:admin 2021-05-07 我要评论

要求:兼容大部分手机屏幕,一屏展示,不出现任何滚动条,现在在部分机型下会出现上下滑动的滚动条 区域1 固定高度 44px 区域2 固定高度 140px 区域2 固定高度 6...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

要求:兼容大部分手机屏幕,一屏展示,不出现任何滚动条,现在在部分机型下会出现上下滑动的滚动条

区域1 固定高度 44px
区域2 固定高度 140px
区域2 固定高度 60px
区域4 高度自适应 内容超出滚动

区域1-4 组成一个可以可以滑动的swiper-container 高度是80%

区域5 没设置高度

image.png

`

  <template>
    <div class="dd">
    <div class="top" id="区域1">
     <!-- 固定高度44px 后期转化成rem -->
    </div>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div style="height: 140px; padding-top: 55px" id="区域2">
        <!-- 内容  固定高度140px -->
      </div>

      <div class="inter" id="区域3">
        <!-- 无特殊要求 内容一般一行 最多两行展示完 -->
      </div>
      <div class="sen" id="区域4">
       <!-- 内容不定,有时候很多,有时候很少,高度自适应,超出高度滚动 -->
      </div>
    </div>
  </div>
</div>
<div style="width: 50%; margin: 0 auto" id="区域5">
  <!-- 不随着区域2 3 4 左右滑动 -->
  <van-button>不再标记</van-button>
</div>
</div>
</template> 

`

<style lang="scss" scoped>
.word {
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 20px;
    font-weight: normal;
  }
  .top {
    display: flex;
    justify-content: space-between;
    height: 44px;
    align-items: center;
  }
  .pop {
    margin-left: 20px;
  }
  .pup-title {
    width: 100%;
    background-color: #ffce43;
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 8px 3px;
    position: relative;
  }
  .hide {
    position: absolute;
    right: 5px;
    top: 8px;
  }
  /deep/.van-popup--left {
    width: 180px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .btn-text {
    margin-left: 5px;
    font-weight: bold;
  }
  .num {
    margin-right: 10px;
    span {
      display: inline-block;
      padding: 5px 20px;
      box-sizing: border-box;
      font-weight: bold;
      color: #fff;
      background-color: #595959;
      border-radius: 20px;
      letter-spacing: 3px;
      text-align: center;
    }
  }

  .swiper-container {
    margin-top: 5px;
    height: 80%;
  }
  .swiper-slide {
    height: 100%;
    text-align: center;
  }
  .inter {
    display: flex;
    align-items: center;
    text-align: left;
    margin-left: 20px;
    color: #ffce43;
    height: 60px;
    span {
      font-size: 16px;
    }
  }
  .sen {
    color: black;
    text-align: left;
    height: calc(100% - 240px);
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    p {
      font-size: 14px;
      line-height: 24px;
      max-width: 100%;
      padding: 0;
      margin: 0;
    }
  }
  .van-button--info {
    border: 0.02667rem solid #ffce43;
  }
}
</style>
###

css提供的不全呀。

讲道理看你设置的项没有会超的可能呀


这里的80% 是无效的,可以用80vh

image.png

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 【移动端】h5页面要求兼容各种机型一屏

    【移动端】h5页面要求兼容各种机型一屏

  • react+typescript实现可以在页面随意拖

    react+typescript实现可以在页面随意拖

  • hadoop2.10执行自带的测试程序不输出ou

    hadoop2.10执行自带的测试程序不输出ou

  • vs code上的git管理总是想删我文件?

    vs code上的git管理总是想删我文件?

腾讯云代理商
海外云服务器