unapp微信小程序实现如何让父元素滚动后才让子元素滚动

结构：绿色框为可以滚动的元素，

需求：滚动商品或者分类列表的时候，先滑动banner到上面去，再滑动分类列表或者商品列表的滚动条

效果：类似美团商品详情的简单版

banner滚动到上面后再滑动才是分类列表滚动或者商品列表滚动

动起来大概这样

https://vdn6.vzuu.com/SD/6e89b906-23a1-11eb-87f1-faee0cc0063c.mp4?pkey=AAUszmUj6tBRoinFlHexpBpZBvalNZpocz76oLjnhbGPYTcEQwA8SXlNVxv9edM--t6Jssq8fgMx8gJBD1Sp-gTZ&c=avc.0.0&f=mp4&pu=078babd7&bu=078babd7&expiration=1684485955&v=ks6

1.setTimeout和uni.createSelectorQuery()配合 获取banner元素高度

2.onPageScroll获取滚动距离 用scrollTop和banner高度 进行判断banner是否已经滑动到上面 结果存在canScroll变量里

3.给scroll-view标签的scroll-y canScroll变量 来判断是否允许纵向滚动 滚动cateList和goods

<template>
	<div class="cate">
    <div class="banner">
      <swiper><script-item>...</script-item></swiper>
    <div>
    <div class="wrapper">
      <scroll-view :scroll-y="canScroll" class="cateList">
        <ul>
          <li v-for="(item, index) in cateList" :key="index">{{ item }}</li>
        </ul>
      </scroll-view>
      <scroll-view :scroll-y="canScroll" class="goods"><ul><li>...</li></ul></scroll-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateList: ["分类名1","分类名2","分类名3"], // 分类列表数据
      scrollTopHeight: 0,
      canScroll: false, // 是否可以滚滚动条
    };
  },
  onLoad() {
  	_self = this;
    setTimeout(() => {
      const query = uni.createSelectorQuery().in(_self);
      query.select('.banner').bondingClientRect(data = > {
        _self.scrollTopHeight = data.height;//获取banner的高度 适配不同机型高度
      }).exec();
    },1000)
  },
  onPageScroll(e) {
  	this.canScroll = e.scrollTop > this.scrollTopHeight;// 滚动高度是否大于banner高度 大于为true小于为false
	},
};
</script>

<style lang="scss" scoped>
.cate {
	height: 100%;
}
.banner {
  height: 300px;
  overflow: auto;
  position: relative;
}
.cateList {
	height: 100%;
}
.goods {
  overflow: hidden;
}
</style>