微信小程序輸入框上移問題解決

微信小程序的輸入框在上面還好,如果不是,在聚焦的時候頁面就會上移,上方的頁面信息會看不到,影響用戶操作

在這里可以手動設置並獲取輸入框的高度來解決

這種方式雖然有的機子有點卡,但是已經算是比較完美的解決方案了

頁面部分

<view class="page-bottom" style="bottom:{{bottom}}px">
 <view class="block input-box">
      <view class="block-left">
        <input bindconfirm="toSubmit"
          value="{{code}}"
          bindfocus="inputFocus"
          bindblur="inputBlur"
          focus
          adjust-position="{{false}}"
          class="block-main"
          type="text"
          placeholder="手動輸入"
          confirm-type="go"
          cursor-spacing="100"></input>
      </view>
    </view>
  </view>
              

js部分

inputFocus (e) {
  this.setData({bottom: e.detail.height})
},
inputBlur () {
  this.setData({bottom: 0})
}