swiper子元素加上下滚动,但是swiper自己的左右滑动不好使了,怎么办呢?

image.png
红框是swiper内置4个模块,都是横向滚动
但是我现在给第一个展示的SwiperSlide子元素加了上下滚动
导致swiper本身的左右滑动不了了,其他SwiperSlide不受影响
!!!pc可以 移动端不行
就第一个不行 求解答🙏
我用的swiper.js(api:swiper.js
代码(react+swiper):
image.png

<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;
      }
  }
}
阅读 2.7k
1 个回答

试试第一个SwiperSlide里:

onScroll = { e => {
    if (e.target.scrollTop === 0 || e.target.scrollTop === e.target.scrollHeight - e.target.clientHeight) {
        Fnscroll(e);
    }
}}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题