uni-app stepped pit - move on to address the whole page after page H5 micro-channel public number soft keyboard pops up next system ios

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/PrisonersDilemma/article/details/102704059

Conditions of the problem is that some models ios system in the micro-channel public number H5 page, click on the input after the input, the soft keyboard to recover, but the overall page appears on the move, it does not automatically spring back to the top of the page.

The idea is to solve the triggering event in the input loses focus, manual back to the top of the page.

input
input box.

Event Property Description

Property name	Types of	Defaults	Explanation	Platform Differences Description
@input	EventHandle		When the keyboard input, triggering an input event, event.detail = {value}	Differences see Tips below
@focus	EventHandle		When focusing trigger input box, event.detail = {value, height}, height is the height of the keyboard	Only a small micro-channel programs, 5 + App (HBuilderX 2.2.3), QQ applet support height
@blur	EventHandle		When the trigger input box loses focus, event.detail = {value: value}
@confirm	EventHandle		When you click the Done button trigger, event.detail = {value: value}

Tips

• inputEvent handlers can directly return a string, to replace the contents of the input box. Only a small micro-channel support program.
• inputIn the event handler real-time modification of the current value does not take effect, can delay settings, such as: setTimeout(() => { this.value = 100 }, 0).
• inputThere is a default component of the min-heightstyle, if the min-heightvalue is greater than heightthe value of that heightstyle is invalid.

uni.pageScrollTo (OBJECT)
will scroll the page to the target location.

OBJECT Parameter Description

parameter name	Types of	Mandatory	Explanation
scrollTop	Number	Yes	Scroll to the destination page (in px)
duration	Number	no	Scrolling animation duration, default 300ms, in ms

Specific code:

	<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
	  })
	}