微信小程序input，如何不自動推上頁面

背景

微信小程序輸入框每次聚焦的時候都會致使頁面擡起來，會致使內容看不見

問題

查看官方文檔獲得，是否擡起頁面的屬性是adjust-position, 經過設置true/false來控制是否擡起來，設置false後就不會擡起來了，可是輸入框也不會擡起來，會一直沉底，被減胖覆蓋着。

解決辦法

input在觸發focus的時候會返回一個對象，對象中包含一下信息：

{
    currentTarget:{id: "", offsetLeft: 12, offsetTop: 9, dataset: {…}},
    mp:{type: "focus", timeStamp: 11143, target: {…}, currentTarget: {…}, detail: {…}},
    preventDefault:ƒ noop(a, b, c),
    stopPropagation:ƒ noop(a, b, c),
    target:{id: "", offsetLeft: 12, offsetTop: 9, dataset: {…}, value: "", …},
    timeStamp:11143,
    type:"focus",
    x:undefined,
    y:undefined
}

複製代碼

是的，在target中存在一個屬性，叫作height，能夠獲得鍵盤的高度。上代碼： HTML

<div class="moment-detail__input" v-if="isShowInput" :style="{'bottom': keyBoardHeight}">
      <div class="bg">
        <i class='icon icon-edit-group-notice'></i>
      </div>
      <input type="text" :focus='isShowInput' :placeholder="placeholder" :adjust-position="false" @blur="hideInput" @confirm='send' @focus="testFocus" cursor-spacing="15" v-model="value" confirm-type="send" placeholder-style="placeholder">
  <div class="moment-detail__input__btn-send" @tap="send">
    發送
  </div>
</div>
複製代碼

JS

testFocus (e) {
      this.keyBoardHeight = e.target.height + 'px'
    },
複製代碼

最後完美解決