uni-app踩坑 - 解决ios系统下微信公众号H5页面软键盘弹出后页面整体上移

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/PrisonersDilemma/article/details/102704059

问题出现的条件是ios系统部分机型，在微信公众号H5页面上，点击input输入后，软键盘收回，但整体页面出现上移，没有自动弹回到页面顶部。

解决的思路是在input失去焦点时触发事件，手动回到页面顶部。

input
输入框。

事件属性说明

属性名	类型	默认值	说明	平台差异说明
@input	EventHandle		当键盘输入时，触发input事件，event.detail = {value}	差异见下方 Tips
@focus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	仅微信小程序、5+App（HBuilderX 2.2.3） 、QQ小程序支持 height
@blur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
@confirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}

Tips

• input 事件处理函数可以直接 return 一个字符串，将替换输入框的内容。仅微信小程序支持。
• input 事件处理函数内实时修改当前值不生效，可以延迟设置，例如：setTimeout(() => { this.value = 100 }, 0)。
• input 组件上有默认的 min-height 样式，如果 min-height 的值大于 height 的值那么 height 样式无效。

uni.pageScrollTo(OBJECT)
将页面滚动到目标位置。

OBJECT参数说明

参数名	类型	必填	说明
scrollTop	Number	是	滚动到页面的目标位置（单位px）
duration	Number	否	滚动动画的时长，默认300ms，单位 ms

具体代码：

	<form @submit="clickdl" @reset="formReset">
	  <view class="login-form-input">
	    <input
	      name="username"
	      type="text"
	      @blur="toTop"
	      placeholder-class="f-gray"
	      placeholder="请输入您的账号">
	  </view>
	  <view class="login-form-input">
	    <input
	      name="password"
	      type="password"
	      @blur="toTop"
	      placeholder-class="f-gray"
	      placeholder="请输入您的密码">
	  </view>
	  <button
	    formType="submit"
	    class="login-form-btn"
	    >确定</button>
	</form>

	toTop() {
	  uni.pageScrollTo({
	    scrollTop: 0,
	    duration: 0
	  })
	}