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

本文介绍了如何在微信小程序中避免picker组件与手机键盘重叠的问题,通过为picker父元素添加点击事件并调用`wx.hideKeyboard`函数,尽管存在延迟但有效解决了iOS设备上的键盘遮挡问题。
摘要由CSDN通过智能技术生成

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

解决方法来自于这个博主,非常感谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值