<template>
  <view class="content">
    <view class="swiper">
      <template v-if="scrollTop < 300">
        <u-swiper :list="list1" height="100vh" imgMode="heightFix"></u-swiper>
      </template>
      <template v-else>
        <view class="zoom-box" :style="{ 'transform': `scale(${scale})` }">
          <u--image :showLoading="true" src="https://img2.baidu.com/it/u=3369130612,2858330241&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" width="100%" height="500rpx" mode="widthFix"></u--image>
        </view>
      </template>
    </view>
    <scroll-view class="fixed" scroll-y :scroll-top="scrollTop" scroll-with-animation @scroll="handleScroll" @touchend="handleTouchEnd">
      <view style="height: 100vh;pointer-events: none;"></view>
      <view class="main">
        <view v-for="item in 200">{{ item }}</view>
        <u-button type="primary" shape="circle" text="按钮形状"></u-button>
      </view>
    </scroll-view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ],
      scrollTop: 0,
      scale: 2,
      currentScrollTop: 0
    }
  },
  methods: {
    handleScroll(event) {
    },
    handleTouchEnd() {
    },
    handleTouchstart(e) {
      console.log(e);
    }
  }
}
</script>


<style lang="scss" scoped>
.swiper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}


.main {
  margin-top: -120rpx;
  background-color: #fff;
}


.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  overflow-y: auto;


}
</style>

当我可以上上下滚动的时候 我的轮播左右就无法滚动了,当我最外层添加pointer-event: none; 时候 轮播可以滚动 但是上下又无法滚动了

请问如何解决既可以上下滚动,又可以轮播左右滚动 急急急