小程序-输入框跟随键盘弹起
当表单的 输入框在底部时,手机上要弹出键盘,必须把输入框往上弹,需要设置输入框height高度在键盘的位置。
将inputBoxBottom变量设置给底部输入框外层的view标签: <view class="input-box" style="bottom:{{inputBoxBottom}}px"></view> 设置textarea标签adjust-position="{{false}}",保证键盘弹起时,页面不会被顶起,只是底部输入框bottom变化而使输入框抬起至键盘上方: <textarea adjust-position="{{false}}" ></textarea> onLoad(options: any) { wx.onKeyboardHeightChange((res) => { const height = res.height; if (height > 0) { this.onKeyboardShow(height); } else { this.onKeyboardHide(); } }); }, onKeyboardShow(height: number) { this.setData({ inputBoxBottom: height, }); }, onKeyboardHide() { // 处理键盘收起逻辑 this.setData({ inputBoxBottom: 0, }); }
如需转载原创文章,请标注原文地址,版权所有!
浙公网安备 33010602011771号