第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > 微信小程序 解决自定义顶部导航栏被键盘挤压的问题

微信小程序 解决自定义顶部导航栏被键盘挤压的问题

时间:2020-05-03 22:42:35

相关推荐

微信小程序 解决自定义顶部导航栏被键盘挤压的问题

解决思路:

先把键盘的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})},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。