解决微信小程序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上是不生效的。）

解决方法来自于这个博主，非常感谢！

解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题相关推荐

解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
微信小程序 IOS中new Date()时间格式不兼容问题
问题描述: 最近在小程序项目中遇到了处理Date时间格式的需求,在Android手机测试是没有发现问题的,但是在IOS上时间转换出现了错误. 解决方案: 这里主要兼容问题在于Android可以处理 ...
微信小程序拒绝授权后不弹出
在微信小程序中,如果用户在小程序中拒绝过授权,下次再请求时是不会再次弹出授权窗口的. 所以需要先判断授权状态,手动弹出授权提醒 const mapInfo = () => {return new ...
微信小程序页面跳转、弹出框
一.页面跳转页面跳转是微信小程序中使用较为频繁并且很重要的功能之一,页面跳转一般是通过点击按钮或者文本区域后需要进行的操作. 页面跳转中需要注意的点很多,我在这就介绍一些我在写项目过程中所遇到的一些 ...
夜神模拟器抓包微信小程序（进入浏览器，弹出安全警告（安全证书有问题解决方法）
1.声明:本文仅限学习研究讨论,切忌做非法乱纪之事! 即使按照其它教程的安装证书,也只是把证书安装到了用户下面,然而安卓高版本(7.0)之后呢,app可以只信任指定证书和系统内置的证书,后续用户安装的 ...
微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
微信小程序点击按钮实现弹出模态框
效果如下图 wxml如下: <button bindtap="popup">弹出</button><view cl ...
微信小程序简易实现模态框弹出框方法代码
方法如下介绍 wxml代码 Javacript代码 wxss样式介绍可以将showModal和hideModal内的方法交换从而改变弹出框方向,但要注意showModalStatus在两个函数内 ...

解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题

解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题

解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题相关推荐

最新文章

热门文章