swiper slide 内部滑动 处理方案

场景： 滑动到第三屏幕时 内容超出屏幕 swiper内部 展示不完全需要滑动
问题： 添加 “swiper-no-swiping” 后无法滚动到上一屏
处理： 添加滑动事件监听
判断是否上滑 设置是否添加 “swiper-no-swiping”

import React, { useCallback, useEffect, useRef, useState, useContext, memo } from 'react';
import debounce from 'lodash/debounce';

const Component = () => {
	const [isTop, setIsTop] = useState(false);
    const [activePage, setActivePage] = useState(0);
    const swiperRef = useRef<any>(null);

    useEffect(() => {
        if (activePage !== 2) {
            setIsOver(false);
            setIsTop(false);
        }
    }, [activePage]);

    const onScrollApp = debounce(() => {
        if (scrollerRef.current.scrollTop === 0) {
            setIsTop(true);
        }
    }, 50);

//判断屏幕宽高比 是否需要滑动
    const isScroll = useMemo(() => {
        const WHScale = 750 / 1624;
        try {
            let w = (document.getElementById('root') as HTMLFormElement).clientWidth || 375;
            let h = (document.getElementById('root') as HTMLFormElement).clientHeight || 812;
            if (w / h > WHScale) {
                return true;
            } else {
                return false;
            }
        } catch (error) {}
    }, []);

 // dom
    return (
     <Swiper
     	 	freeMode={true}
             onSwiper={(swiper) => (swiperRef.current = swiper)}
                direction={'vertical'}
                speed={500} // 滚动速度控制
                onSlideChange={(e)=>{
					// onSlideChange	
					setActivePage(e)
				}}
                slidesPerView={1}
                spaceBetween={0}
               //  什么条件允许滚动、下滑， 业务需求 activePage  isLogin 
               // noSwiping={activePage === 1 && !isLogin ? false : true}
               // allowSlideNext={activePage === 1 && !isLogin ? false : true}
                autoHeight={true}
                lazy={{
                    loadPrevNext: true,
                }}
            >
         <SwiperSlide key={1} aria-orientation="vertical">
      		内容。。。。		
   		</SwiperSlide>
 		<SwiperSlide key={2} aria-orientation="vertical">
      		<div className={`${isScroll ? (activePage === 2 && !isTop ? 'swiper-no-swiping' : '') : ''}`}
           		 ref={scrollerRef}
            	onScroll={onScrollApp}> 
           		<div className="ThirdScreen" id="ThirdScreen">
            		超长内容盒子
            	</div>
       		</div>	
   		</SwiperSlide>
    </Swiper>
   )
}

exoprt default Component