父组件里有多个子组件,怎么让其中一个子组件滚动的时候整体父组件也跟着向上滚动?需要做一个子组件吸顶效果?
<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浏览器那样新闻上滑然后顶部的隐藏
先纠正一下,QQ那个不是同步滚动的。
你可以慢慢上划,它应该是列表页向上滚动一定距离后,触发某个事件让顶部也上滑(动画缩小)
所以你可以用类似的方法,在scroll一定距离的时候,用事件通知父组件transition上滑(缩小/隐藏)
同理下滑展示父组件也可以。
如果要同步上下滑的话……不太推荐,父组件被切割掉一小块不太好看,所以QQ的这个方案其实不错,顶部总共就两个尺寸,动画变一下即可。
同步滑动的话,监听滚动事件然后操作父组件也激发这个事件应该可以达到这种效果