红框是swiper内置4个模块,都是横向滚动
但是我现在给第一个展示的SwiperSlide子元素加了上下滚动
导致swiper本身的左右滑动不了了,其他SwiperSlide不受影响
!!!pc可以 移动端不行
就第一个不行 求解答🙏
我用的swiper.js(api:swiper.js)
代码(react+swiper):
<Swiper
modules={[]}
scrollbar={{ draggable: true }}
spaceBetween={0}
slidesPerView={1}
onSlideChange={(e) => {
for(let i in pageTabRef.current) {
if(i === ('gift-' + e.activeIndex)) {
pageTabRef.current[i].style.fontSize = '0.3rem'
pageTabRef.current[i].style.fontWeight = 'bold'
} else {
pageTabRef.current[i].style.fontSize = '0.24rem'
pageTabRef.current[i].style.fontWeight = '500'
}
}
}}
onSwiper={(swiper) => setSwiperDom(swiper)}
observer= {true}
observeParents= {true}
hashNavigation= {{watchState: true}}
>
<SwiperSlide className='Swiper_page'>
<div className='Linkage_Box'>
<div className="Linkage_Box_left" ref={leftbox}>
{tit.map((item, index) => <div className='Linkage_Box_left_big' key={item} onClick={() => handel(index)} className={leftin === index ? "Linkage_Box_left_big action2" : "Linkage_Box_left_big"}>
<div className='text'>{item}</div>
</div>)}
</div>
<div className="Linkage_Box_right" ref={rightbox} onScroll={Fnscroll} onTouchEnd={fnend}>
{tit.map((item, index) => <div key={item} className="Linkage_Box_right_big">
{item}
</div>)}
</div>
</div>
</SwiperSlide>
<SwiperSlide className='Swiper_page'>评价tab</SwiperSlide>
<SwiperSlide className='Swiper_page'>会员tab</SwiperSlide>
<SwiperSlide className='Swiper_page'>商家tab</SwiperSlide>
</Swiper>
.Linkage_Box {
width: 100%;
height: 10rem;
display: flex;
overflow: hidden;
box-sizing: border-box;
.Linkage_Box_left::-webkit-scrollbar {
display: none;
}
.Linkage_Box_left {
width: 20%;
background-color: #F7F8F8;
overflow-y: scroll;
scroll-behavior: smooth;
box-sizing: border-box;
padding-bottom: 0.8rem;
.Linkage_Box_left_big {
width: 100%;
height: 0.8rem;
text-align: center;
line-height: 0.8rem;
// border-bottom: 0.01rem solid #000;
box-sizing: border-box;
padding-top: .15rem;
.text {
width: 100%;
height: .5rem;
line-height: .5rem;
text-align: center;
box-sizing: border-box;
border-left: 0.1rem solid transparent;
}
}
}
.Linkage_Box_right::-webkit-scrollbar {
display: none;
}
.Linkage_Box_right {
width: 80%;
background-color: #ffffff;
overflow: auto;
scroll-behavior: smooth;
box-sizing: border-box;
padding-bottom: 0.8rem;
.Linkage_Box_right_big {
width: 100%;
height: 80vh;
border-bottom: 0.01rem solid #000;
box-sizing: border-box;
}
}
}
试试第一个SwiperSlide里: