固定底部button按鈕,兼容各種手機、微信等【flex布局】


 
          
吸底布局盡量不要使用fixed布局,客戶端里的表現可能跟微信里不一樣。
目前頁面在需要考慮如下情況適配:
微信IOS
微信安卓
醫生端安卓
醫生端IOS
用戶端安卓
用戶端IOS
iphone普通屏
iphone x及以后的長屏
<template>
  <div class="container">
    <div class="header">我是head</div>
    <div class="content">我是content</div>
    <div class="footer">我是foot</div>
  </div>
</template>
 
        
.container {
  height:100%; min-height: 100%;
  width: 100%;
  // flex布局核心代碼
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: scroll;
  }
  .footer {
    // 適配iphone X 及以后機型
    @include iphonex(margin-bottom);
  }
}
// 適配iphonex及以后的底部.
// $name可選'margin-bottom','bottom','padding-bottom' 等等
@mixin iphonex($name) {
  @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    #{$name}: constant(safe-area-inset-bottom);
    #{$name}: env(safe-area-inset-bottom);
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM