vue solves the problem that mintui pop up window pops up and the bottom page scrolls bug

  • 2021-09-20 19:14:17
  • OfStack

After dom layer-by-layer annotation narrowing feedback, the problem was finally found.

Problem course

When I pop up the pop-up window, I set popupVisible to true

Then the updated lifecycle hook function of vue is triggered

Then I did this in this function. $refs. container. offsetHeight caused the page to be redrawn

It then causes the bottom page to scroll up

Solution

Remove the redrawing method in updated function

Supplementary knowledge: Summary of project summary on solving the rolling penetration problem of mt-popup using mint-ui in vue

To be honest, there are a lot of problems with the Mint-ui ui component, and there are a lot of problems with the ui component.

Let's start with today's topic. I have scroll penetration problems when using popup selection box and datepicker time selector, especially on ios.

I found a lot of methods, and finally my colleagues gave a good method, which was very concise, so I thought about summarizing it.

To prevent scroll penetration, just add @ touchmove. native. stop. prevent to block the default event of the default root element. native is the key, which means the root element, that is, body or html

The code is as follows:

Popup component:


<mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
  </mt-popup>
  //  Prevent rolling penetration   Just join @touchmove.native.stop.prevent  Just block the default event of the default root element native Is the key, which means the root element, which is body Or html
  <mt-popup
   v-model="popupVisible"
   position="bottom"
   @touchmove.native.stop.prevent>
   ...
  </mt-popup>

Note that when there are child elements such as div in mt-popup, 1 Be sure to note that there may be some problems at this time, and the element mt-popup cannot be scrolled. Therefore, if mt-popup itself does not need to be scrolled, if @ touchmove.native.stop.prevent is added, the bottom page will not slide along. If there are scroll bars in mt-popup, it may not be scrolled. At this time, it is necessary to adopt conventional methods, as follows:

//Solution: By listening to the popupVisible variable, the touchMove event of the body node is prohibited after the pop-up window appears, and the touchMove event of the body node is restored after the pop-up window disappears


 //html  As follows 
   <mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
   </mt-popup>
  // js  As follows 
  const handler = function(e) {
    e.preventDefault();
  }
  
  // vue Within an instance 
  watch: {
    popupVisible: function (val) {
     if(val) {
       document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
     } else {
       document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });
     }
    }
  }

Datetime Picker:


 <mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @touchmove.native.stop.prevent>
 </mt-datetime-picker>

For the time component, @ touchmove.native.stop.prevent is added, so the bottom page will not scroll when selecting time scrolling, which is perfect.

@ touchmove.native.stop.prevent can save us a lot of things. Use it!


Related articles: