解决思路:
先把键盘的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})},