- 试图让底部的按钮悬浮在键盘上方，在基础机型上获取的键盘高度是准确的，但是在一些全面屏手机比如iPhone X或者小米8上都很不理想。个人认为小程序似乎没有计算全面屏中键盘下方的高度。有什么办法可以获取所有手机上准确的键盘高度吗？
备注：我希望让按钮或者view悬浮在键盘上方，已知input中可以设置cursor-spacing属性。
2 个回答
请 登录 后发表内容
相关问题
相关文档
- wx.onKeyboardHeightChange: 小程序/开发/API/设备/键盘/wx.onKeyboardHeightChange
- wx.onKeyboardHeightChange#功能描述: 小程序/开发/API/设备/键盘/wx.onKeyboardHeightChange
- wx.onKeyboardHeightChange#参数: 小程序/开发/API/设备/键盘/wx.onKeyboardHeightChange
- wx.onKeyboardHeightChange#示例代码: 小程序/开发/API/设备/键盘/wx.onKeyboardHeightChange
- wx.offKeyboardHeightChange: 小程序/开发/API/设备/键盘/wx.offKeyboardHeightChange
刚刚完成了一种比较满意的实现方式,步骤如下：
1.设置input的cursor-spacing,比如140.
<input
cursor-spacing='140' />2.底部放置一个按钮，然后在页面上加入一个隐藏的按钮，该按钮是底部按钮在键盘弹出时的副本；并且这个隐藏按钮只有在键盘弹起时显示，而底部按钮只有在键盘隐藏时显示。这个隐藏按钮距离input组件的纵向距离是固定的，等于cursor-spacing的值值减去该按钮高度。这样该键盘显示时就正好在键盘上方，而不用考虑键盘的高度。
<blockwx:if="{{keyboardPopUp}}"><viewclass='keyboard-button'animation="{{animation}}">继续</view></block><blockwx:else><viewdata-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})}备注：由于从检测到键盘弹出事件到动画响应有一点时间间隔，你会发现该按钮和键盘弹出并不是完全同步的，有一定的时间差。目前效果只做到这里，如果有更好的方式，欢迎继续回答。
这个方案很好，但是 textarea 上就用不了了吧
应该是的，小程序目前可自定义的远远没有原生app多。很多时候要被迫接受一些细节的不完美。
可以针对全面屏增加底部高度~
这是我们正在考虑的方案，但是很担心不同的全面屏手机底部高度会不一样，那样的话工作量会比较大。
目前看别人分享的兼容方案大部分也没很复杂。
判断全面屏和手机型号都不复杂，但是如果UI的设计要求比较高的话，做起来就会很麻烦。小程序没有提供准确的获取这个位移或者键盘高度的接口，很多公司可能放弃按钮上移的feature或者尝试适配主流机型。
嗯