利用flex佈局解決ios輸入框被鍵盤遮擋問題

一、說明

網上有不少相似例子，我本身也使用vue寫一個簡單的demo，主要利用flex佈局，解決ios端偶現的，fixed或者absolute佈局致使的輸入框被鍵盤遮擋問題，至於鍵盤收起頁面卡住等其餘問題 請參考連接：h5頁面在不一樣ios設備上的問題總結 ，本demo暫時不考慮。

原理是：使用flex佈局，把要滾動的區域置於底層滾動。

二、表現

在手機端，微信瀏覽器和qq瀏覽器，釘釘瀏覽器等，都表現的不錯，在safri瀏覽器會有底部固定效果失效的問題，這個問題比較嚴重，我還沒來得及仔細研究緣由

另外，若是手機安裝了第三方輸入法,好比搜狗輸入法，仍是會有遮擋問題 ，使用原生鍵盤沒有問題，本demo中，爲了解決這個問題，在聚焦的時候，給底部加了一個margin，若是誰有好的辦法，請給我留言

加了margin後原生鍵盤體現：

三、代碼

html部分：一個父節點，兩個子節點，父節點：flex-test，子節點:一個是要滾動的區域content，一個是footer,固定在底端

<template>
  <div class="flex-test">
    <!-- 內容區域 -->
    <content class="content">
        <!-- 頭部 -->
        <header class="header">header</header>
         <ul v-for="(item,index) in datalist" :key="index">
            <li>{{item}}</li>
         </ul> 
    </content>
    <!-- 底部輸入框部 -->
    <footer class="footer">
      <input type="text" class="input">
      <button class="button">submit</button>
    </footer>
  </div>
</template>
複製代碼

js部分：爲了體現滾動效果，能夠給數組加長，我只寫了三項是爲了文檔簡潔。

<script>
export default {
  name: "pagetest",

  data() {
    return {
        datalist:[
            "body數據body數據body數據body數據body數據",
            "body數據body數據body數據body數據body數據",
            "body數據body數據body數據body數據body數據",
        ]
    };
  },
  mounted() {
  
  //這個是給底部固定加一個margin高度，爲了解決第三方輸入法遮擋問題，固然切換到原生鍵盤，也會高出一些
    document.querySelector("input").addEventListener("focus", () => {
      document.querySelector("footer").style.marginBottom = "20px";
    });
  },
};
</script>
複製代碼

css 部分：

<style scoped lang="scss">
.flex-test {
  display: flex; // 設置flex
  flex-direction: column;
  height: 100vh;  //設置高度爲屏幕高度
  
  .content {
    flex: 1;    //這部份內容置於底層，這樣content之外的節點，都會在頂層
    overflow: auto;  //超過一屏滾動
    -webkit-overflow-scrolling: touch;
  }
}

//後面那些css 沒什麼特殊的，正常按照你的習慣，寫底部的樣式就好了
.header {
  height: 5rem;
}
.footer {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #ccc;
  padding: 0 2rem;
  .input {
    width: 200px;
    height: 30px;
     border-radius: 4px;
  }
  .button {
    width: 50px;
    height: 30px;
    background: #fff;
    border-radius: 4px;
  }
}
</style>
複製代碼

示例圖片：