在react中使用Swrap滑动到指定位置

import { useState, useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

 const [swrapObj,setSwrapObj] = useState();
 <Swiper
     spaceBetween={0}
     slidesPerView={1}
     onSlideChange={handleSlideChange}
     className='Swiper'
     direction="vertical"
     longSwipesRatio={0.1}
     onSwiper={(el) => setSwrapObj(el)}
   >
  <SwiperSlide >
     内容区域
  </SwiperSlide>
 </Swiper>
swrapObj.slideTo(index);//滑动到指定index

内容区域有滚动条，滚动条先滚动到底部或者顶部再继续滑动，通过事件冒泡实现

 const scrollRef = useRef();
var startX, startY; 
const handleTouchStart = (e) => {
   startX = e.touches[0].pageX; 
    startY = e.touches[0].pageY; 
}
const handleTouchMove = (ev) => {
    const event = scrollRef.current;
    var endX, endY; 
    endX = ev.changedTouches[0].pageX; 
    endY = ev.changedTouches[0].pageY; 
    var direction = GetSlideDirection(startX, startY, endX, endY); 
    switch(direction) { 
        case 1: 
        // 向上 
        if(event.clientHeight !=event.scrollHeight && event.clientHeight + Math.ceil(event.scrollTop) < event.scrollHeight){
            ev.stopPropagation();
        }
        break; 
        case 2:  // 向下
        if(Math.ceil(event.scrollTop) !== 0){
            ev.stopPropagation();
        }
        break; 
        default: 
    } 
}
const GetSlideDirection = (startX, startY, endX, endY) => { 
   var dy = startY - endY; 
    //var dx = endX - startX; 
    var result = 0; 
    if(dy>0) {//向上滑动 
      result=1; 
    }else if(dy<0){//向下滑动 
      result=2; 
    } else{ 
      result=0; 
    } 
    return result; 
}

html

<div 
    id='scroll-con' 
    ref={scrollRef} 
    onTouchStart={handleTouchStart}
    onTouchMove={handleTouchMove}
    className='preview-con' >
    <div className='preview-container' >
       内容区域
    </div>
     <div className={`show-next`} >
          <img alt='' src={SlideIcon} />
          <p>
              上滑查看下一章
          </p>
      </div>
</div>