微信小程序软键盘引起页面上移
微信小程序里input或textarea聚焦会唤起软键盘，如果输入框在软键盘以上没事，但如果在软键盘位置以下甚至贴着底部，整个页面就会被软键盘推上去。
有什么办法能让软键盘推着键盘上移，又不让页面被推上去呢。
布局
首先先假设页面的布局，布局不一样，解决方案也不一样。以经典的底部输入框为例，我选择flex布局，好处是各部分高度自然伸缩，比定位布局方便不少。
文章图片
方案
- 将input的adjust-position属性设置为false，即不上推页面。
- 在输入框底下再加一个容器用来表示软键盘高度。
- 监听输入框focus，blur事件，
e.detail.height就是软键盘高度
...
【微信小程序软键盘引起页面上移】js事件
onInputFocus(e) {
if (e.detail.height) {
this.setData({
keyboardHeight: e.detail.height
})
}
},
onInputBlur() {
this.setData({
keyboardHeight: 0
})
},推荐阅读
- 免app下载笔趣阁小说
- Qt Widgets Application可执行程序发布方式
- 微信空气质量如何查询？微信空气质量查询办法介绍_微信
- 微信邀请函怎样做？微信邀请函自制办法列表_微信
- 微信朋友圈封面怎样换？朋友圈封面更改图文详细教程_微信
- 微信公众号怎样注销 ？微信公众号注销图文详细教程_微信
- 怎样用微信缴纳社保？微信缴纳社保图文详细教程讲解_微信
- 微信理财通提现到账多久？微信理财通提现到账时间介绍_微信
- 微信公众号小程序申请流程列表_微信
- 新手机号绑定别人的微信怎样办？_微信