解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
项目需求:
一个信息提交页面:有input输入框,有picker选择器
遇到的问题:
点击input输入框时,手机自动弹出键盘,但是点击下方的picker选择器时,键盘还在,导致了键盘和picker选择器重叠
解决方案:
<view class="item">
<view class="title">真实姓名</view>
<input class="input" bindinput="realNameInput" value="{{ realName }}" type="text"/>
</view>
<view class="hr"></view>
<!-- 对应角色 -->
<view class="item" catchtap="hideKeyBorder">
<view class="title">对应角色</view>
<picker mode="selector" bindchange="roleChange" value="{{ roleIndex }}" range="{{ roleList }}" range-key="roleName">
<view class="kind-picker">
<input value='{{ storeName }}' class="input" disabled='true' placeholder="{{Jueseplaceholder}}" placeholder-style="color:#333;font-size:28rpx;text-align:right;"></input>
<image class="birth-arrow" src="/image/cat/birth-arrow.png"></image>
</view>
</picker>
</view>
给picker父元素加个点击事件,点击picker的时候将键盘强制隐藏掉(不放图片了,试一下会有惊喜)
(一定要把事件给picker父元素,给picker是不生效的)
hideKeyBorder() {
wx.hideKeyboard({
success: (res) => {
console.log(res)
},
})
},
瑕疵:
点击picker隐藏掉键盘的时候会有一个延迟,就是能看到先收起键盘再弹出picker选择器的一个过程,但是总体感觉上是OK的。( wx.hideKeyboard在ios上是不生效的。)
解决方法来自于这个博主,非常感谢!