vue子组件上拉滚动,怎么让父组件也跟着上拉滚动?

父组件里有多个子组件,怎么让其中一个子组件滚动的时候整体父组件也跟着向上滚动?需要做一个子组件吸顶效果?

<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: #efefef;">
                </div>
                <broadcast v-show="$store.state.opinionData.tapLogo" ref="broadcast" style="height: 50px;">
                </broadcast>
                <div style="height: 6px;background-color: #efefef;">
                </div>
                <tabScroll ></tabScroll> 《===子组件里有上下滚动的方法,子组件上滑希望父组件也就是这个页面也上滑
            </div>
        </div>
    </div>
</template>```


类似于QQ浏览器或者uc浏览器那样新闻上滑然后顶部的隐藏
阅读 5.1k
2 个回答

先纠正一下,QQ那个不是同步滚动的。
你可以慢慢上划,它应该是列表页向上滚动一定距离后,触发某个事件让顶部也上滑(动画缩小)

所以你可以用类似的方法,在scroll一定距离的时候,用事件通知父组件transition上滑(缩小/隐藏)
同理下滑展示父组件也可以。

如果要同步上下滑的话……不太推荐,父组件被切割掉一小块不太好看,所以QQ的这个方案其实不错,顶部总共就两个尺寸,动画变一下即可。
同步滑动的话,监听滚动事件然后操作父组件也激发这个事件应该可以达到这种效果

新手上路,请多包涵

实现了吗?我现在也想做一个子组件向上滚动,父组件也一起滚动的效果。我现在的问题是,子组件嵌套到父组件中的,尴尬的是子组件滚动了,父组件不动,需要设置父组件的高度超过父组件加子组件的内容高度才会整体一起滚动。嵌套是做点击切换子组件的操作,但各个子组件的高度都不一致,不可能设置固定的高度

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题