problem description
as shown in the above three pictures,
- the first picture is the effect of [not yet refreshed], that is, the initial interface;
- the second picture is the "normal Refresh" effect. The white area is displayed as the finger is pulled down. Here, the margin value is set, and the ball comes down from the navbar.
- the third picture is the [abnormal beat] effect, that is, when you enter the interface for the first time, you are ready to pull down and refresh, but do not show the effect of the second picture, but suddenly jump a large distance! It"s inexplicable!
what methods have you tried
at first, I thought it was because of the influence of the margin and padding values I set on it, but I found that this abnormal effect still exists after it is removed, and it is still normal to add the margin and padding values to the official example, so I rule this out.
has searched for what some people call the phenomenon "jitter", which is due to "the rendering position is not yet over", so it is recommended to limit the width and height of interface components, which is indeed a new idea, but some blocks in the author"s interface div width and height are dynamically determined and do not work.
I hope apes and apes can provide relevant ideas to solve the problem, kneel and beg!
related codes
index.vue
<scroller show-scrollbar="false" >
<refresh class="refresh" @refresh="onrefresh" :display="refreshing ? "show" : "hide"">
<loading-indicator class="indicator"></loading-indicator>
</refresh>
<div class="block">
......
<div class="color-block">
</scroller>
index.css
.refresh {
background: linear-gradient(to right, -sharpCCB3AA , -sharpE5D1BB);
// padding-top: 44px;
height: 69px;
display: flex;
align-items: center;
&-indicator {
margin-top: 44px;
height: 25px;
width: 25px;
color: -sharpCCB3AA;
}
}
.color-block{
padding-top: 44px,;
}