background

After entering the H5 page in ios wechat, the keyboard folded up the page but did not go back, leaving a large blank. After gently sliding, the page returned to normal. The scene of the accident

To solve

Take the Vue project as an example. The key to solving this problem is to manually trigger a page scroll event when an element loses focus. However, it costs a lot to add blur events one by one for bugs that only appear in a specific version, so I want to find a method to write once and run anywhere. In this case, mixin is quite appropriate. The code is as follows:

Vue.mixin({
  mounted() {
    this.iosInputBack()
  },
  methods: {
    iosInputBack() {
      let ua = navigator.userAgent
      if (/MicroMessenger/i.test(ua) && /(iPhone|iPad|iPod|iOS)/i.test(ua)) {
        let inputArr = document.querySelectorAll('input');
        inputArr.forEach(item => {
          if(! item.addMixinBlur) { item.addMixinBlur =true
            item.addEventListener('blur', () => { document.body.scrollTop = document.body.scrollTop; })}})}}}})Copy the code

After the page is mounted, find the input element in the page and bind it with the blur event. However, it is found that mixins may be executed multiple times on a page, because each custom component itself triggers mixins. To avoid binding the same input multiple times, you can add an attribute to it to indicate whether it is already bound. Note: The input dropped by v-if missed the binding listener event because it was not traversed. Replace v-if with v-show if possible.

ScrollTop expand

Document. Body. The scrollTop is WeChat browser compatibility method and other information in the document. The documentElement. ScrollTop, so usually the better operating scrollTop method as follows:

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop = document.body.scrollTop = scrollTop;
Copy the code

The above –