解决思路:
先把键盘的adjust-position置为false,防止键盘自动挤压。然后计算键盘弹起时,input实际被遮挡的高度,通过代码来上滑相应的距离
wxml代码:
<view style="padding-bottom: {{nav_scroll_height}}px;">
<input id="myInput" bindfocus="keyboardOcclusion" adjust-position="{{false}}" bindblur="offKeyboardOcclusion"></input>
</view>
id:必须加上一个
bindfocus:input获取焦点的事件
bindblur:input失去焦点的事件
adjust-position:false代表不挤压控件
padding-bottom: {{nav_scroll_height}}px:input需要足够的高度来滑动
js代码:
data: {
nav_scroll_height: 0, //键盘挤压时,input被遮挡的高度
}
//键盘弹起时,解决键盘遮挡问题
keyboardOcclusion(e) {
let windowHeight = wx.getSystemInfoSync().windowHeight;
const query = wx.createSelectorQuery();
query.select('#' + e.currentTarget.id).boundingClientRect();
query.selectViewport().scrollOffset();
console.log('keyBoardHeight',e.detail.height)
var that = this;
query.exec(function(res) {
let inputBottom = windowHeight - res[0].bottom;
//如果input没有被键盘遮挡,不做任何事
if (!res[0] || e.detail.height <= inputBottom) {
that.setData({ nav_scroll_height: 0 });
return;
}
//获取input被键盘遮挡的高度
that.setData({
nav_scroll_height: e.detail.height - inputBottom
});
wx.pageScrollTo({ //滑动input被键盘遮挡的距离
scrollTop: res[1].scrollTop + that.data.nav_scroll_height, //页面滚动的距离
duration: 300 //页面滚动速度 单位ms
});
})
},
//键盘关闭时,解决键盘遮挡问题
offKeyboardOcclusion() {
this.setData({nav_scroll_height: 0})
},