我爱小程序
| 问题模块 | 框架类型 | 问题类型 | API/组件名称 | 终端类型 | 微信版本 | 基础库版本 |
|---|---|---|---|---|---|---|
| API和组件 | 小程序 | Bug | 键盘高度 | 客户端 | 6.5.3 | 2.6.1 |
- 试图让底部的按钮悬浮在键盘上方，在基础机型上获取的键盘高度是准确的，但是在一些全面屏手机比如iPhone X或者小米8上都很不理想。个人认为小程序似乎没有计算全面屏中键盘下方的高度。有什么办法可以获取所有手机上准确的键盘高度吗？
备注：我希望让按钮或者view悬浮在键盘上方，已知input中可以设置cursor-spacing属性。
网友回复
筱强：
刚刚完成了一种比较满意的实现方式,步骤如下：
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 })} |
备注：由于从检测到键盘弹出事件到动画响应有一点时间间隔，你会发现该按钮和键盘弹出并不是完全同步的，有一定的时间差。目前效果只做到这里，如果有更好的方式，欢迎继续回答。
拾忆：
可以针对全面屏增加底部高度~