问题出现的条件是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
})
}