Vue child component pull-up scroll, how to make the parent component scroll along with the pull-up?

there are multiple child components in the parent component, how to make the whole parent component scroll up when one of the child components scrolls? Need to do a sub-component suction top effect?

<template>
    <div class="" id="home" >
        <mt-header fixed title="">
        </mt-header>
        <div class="mui-scroll-wrapper" >
            <div class="mui-scroll">
                <mt-swipe :auto="4000" @change="handleChange" style="height: 143px;margin-top: 40px;">
                <mt-swipe-item v-for="str in listImg">
                    <a class="link"  @tap="imgPage(str)">
                        <img :src="str.picUrl" style="width: 100%">
                    </a>
                </mt-swipe-item>
                </mt-swipe>
                <collect v-show="$store.state.opinionData.tapLogo">
                </collect>
                <div style="height: 6px;background-color: -sharpefefef;">
                </div>
                <broadcast v-show="$store.state.opinionData.tapLogo" ref="broadcast" style="height: 50px;">
                </broadcast>
                <div style="height: 6px;background-color: -sharpefefef;">
                </div>
                <tabScroll ></tabScroll> ===
            </div>
        </div>
    </div>
</template>```


QQuc
Apr.07,2021

correct first, the QQ one is not scrolled by Synchronize.
you can stroke up slowly. It should be that after the list page scrolls up a certain distance, it triggers an event to make the top slide up (the animation zooms out)

so you can use a similar method, when the scroll is a certain distance, use the event to tell the parent component to slide up (zoom out / hide)
similarly slide down to show the parent component.

if you want Synchronize to go up and down. It is not recommended that a small piece of the parent component is cut off, so QQ's solution is actually good, with a total of two sizes at the top, and you can change the animation.
if Synchronize slides, listening for scrolling events and then manipulating the parent component also triggers this event should achieve this effect

Has

been implemented? Now I also want to do the effect of a child component scrolling up and the parent component scrolling together. My problem now is that when the child component is nested into the parent component, the embarrassment is that the child component scrolls and the parent component does not move. You need to set the height of the parent component to exceed the content height of the parent component plus the child component to scroll together. Nesting is the operation of clicking and switching subcomponents, but the height of each subcomponent is different, so it is impossible to set a fixed height

.
Menu