同时使用u-swiper和scroll-view就不能滑动轮播组件了?
<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; 时候 轮播可以滚动 但是上下又无法滚动了 请问如何解决既可以上下滚动,又可以轮播左右滚动 急急急
