321

src/components/ScrollView.tsx

@@ -8,7 +8,7 @@ import ScrollBar from "@better-scroll/scroll-bar";
 import Slide from "@better-scroll/slide";
 import NestedScroll from '@better-scroll/nested-scroll'
 import ContactImg from '@/assets/img/contact.png'
-
+import { debounce as _debounce } from 'lodash'
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { LazyImg } from "./LazyImg";
 import { useLocation } from "react-router-dom";
@@ -78,7 +78,7 @@ export const ScrollView = (props: ScrollViewType) => {
   BScroll.use(ScrollBar);
   BScroll.use(Slide);
   BScroll.use(NestedScroll)
-  const { wrapHeight, children } = props;
+  const { children } = props;
   const wrapRef = useRef<HTMLDivElement>(null);
   const location = useLocation()
   const [dots,setDots]= useState(0)
@@ -86,48 +86,44 @@ export const ScrollView = (props: ScrollViewType) => {
   const [currentPage,setCurrentPage] = useState(0)
 
   const {data,dispatch} = useContext(AppContext)
-    useEffect(()=>{
-      dispatch({type:'doSome'})
-    },[])
-    useEffect(()=>{
+  useEffect(()=>{
       const scrollEl =  initBScroll(wrapRef.current as HTMLDivElement)
       setScrollObj(scrollEl)
       return () => {
-        scrollObj?.destroy();
+        scrollEl.destroy();
     };
   },[wrapRef])
   useEffect(() => {
     setDots(children&&children.props.children.length)
   }, []);
   useEffect(()=>{
-    const page = scrollObj?.plugins['slide'].pages.currentPage
-    page&&
-    setCurrentPage((prevState: number)=>{
+    const page = scrollObj&&scrollObj.plugins['slide'].pages.currentPage
+    page&&setCurrentPage((prevState: number)=>{
       if(prevState !==  page.pageY){
         return  page.pageY
       }
       return prevState
     })
-    scrollObj?.on('slidePageChanged', (page:any) => {
-      const data = {
-        page:page.pageY,
-        
-      }
+    scrollObj&&scrollObj.on('slidePageChanged', (page:any) => {
+      console.log('slidePageChanged',2332131231);
+      
       setCurrentPage((prevState: number)=>{
         if(prevState !== page.pageY){
-          return  page.pageY
+          dispatch({type:'slideOnChange',payload:{pageIndex:page.pageY}})
+          return page.pageY
         }
         return prevState
       })
     })
   },[scrollObj])
+
+
   const pageMoving =(index:number)=>{
     if(index !== currentPage){
       scrollObj?.goToPage(0, index,600)
     }
     return
   }
-
   return (
     <div
       className="slide-vertical  h-screen w-screen "