获取键盘高度不准确
发布于 7 年前 作者 odu 3720 次浏览 来自 问答
  • 试图让底部的按钮悬浮在键盘上方，在基础机型上获取的键盘高度是准确的，但是在一些全面屏手机比如iPhone X或者小米8上都很不理想。个人认为小程序似乎没有计算全面屏中键盘下方的高度。有什么办法可以获取所有手机上准确的键盘高度吗？

备注：我希望让按钮或者view悬浮在键盘上方，已知input中可以设置cursor-spacing属性。

2 回复

刚刚完成了一种比较满意的实现方式,步骤如下：

1.设置input的cursor-spacing,比如140.

<input

cursor-spacing='140' />

2.底部放置一个按钮，然后在页面上加入一个隐藏的按钮，该按钮是底部按钮在键盘弹出时的副本；并且这个隐藏按钮只有在键盘弹起时显示，而底部按钮只有在键盘隐藏时显示。这个隐藏按钮距离input组件的纵向距离是固定的，等于cursor-spacing的值值减去该按钮高度。这样该键盘显示时就正好在键盘上方，而不用考虑键盘的高度。

<block wx:if="{{keyboardPopUp}}">
  <view class='keyboard-button' animation="{{animation}}">继续</view>
</block>
<block wx:else>
  <view data-id="login_button_10" 
      class='bottom-button'
      bindtap='clickLoginButton'>继续</view>
</block>

3.但是如果要完成和键盘一起弹出和收起的动画的话，就不能让该隐藏按钮直接在键盘上方显示，需要将隐藏按钮到input的距离设置的更大，同时在键盘弹出时，加上上移的动画；收起时，加上下移的动画。

inputFocus(e) {
  console.log('inputFocus:' + JSON.stringify(e));
  this.setData({
    keyboardPopUp: true
  })
  this.animation
    .translateY(-150)
    .step({duration: 250});
  this.setData({ animation: this.animation.export() });
},
inputBlur(e) {
  console.log('inputBlur:' + JSON.stringify(e));
  this.animation
    .translateY(0)
    .step({ duration: 350 });
  this.setData({ animation: this.animation.export() });
  this.setData({
    keyboardPopUp: false
  })
}

备注：由于从检测到键盘弹出事件到动画响应有一点时间间隔，你会发现该按钮和键盘弹出并不是完全同步的，有一定的时间差。目前效果只做到这里，如果有更好的方式，欢迎继续回答。

可以针对全面屏增加底部高度~

回到顶部