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!