feat: 关于我们添加上下页按钮

src/components/EventsScrollView.tsx

@@ -10,6 +10,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "r
 interface ScrollViewType extends IProps {
   wrapHeight?: string;
   prop?: any;
+  getScrollHandler?: (next: Function, prev: Function) => void
 }
 
 const initBScroll = (el:HTMLElement) => {
@@ -57,6 +58,9 @@ export const EventsScrollView = (props: ScrollViewType) => {
     useEffect(()=>{
       const scrollEl =  initBScroll(wrapRef.current as HTMLDivElement)
       setScrollObj(scrollEl)
+      if(props.getScrollHandler) {
+        props.getScrollHandler(scrollEl.next, scrollEl.prev)
+      }
       return () => {
         scrollObj?.destroy();
     };

src/views/About/Memorabilia/index.tsx

 import { IProps } from "@/common/Iprops.interface"
 import { AppContianer } from "@/layouts/AppContianer"
 
-import { useRef, useState, useEffect, useMemo, useCallback } from 'react'
+import { useRef, useState, useEffect, useMemo, useCallback, Fragment } from 'react'
 import { getEvents } from "@/fetch/dataFetch"
 import { EventItem, EventsTable } from "./EventItem"
 import { EventsScrollView } from "@/components/EventsScrollView"
 
+import Step from "@/assets/img/step.png"
+
 
 interface MemorabiliaType extends IProps {
 
@@ -22,37 +24,59 @@ export const Memorabilia = () => {
     return ()=> fetchData.unsubscribe()
   },[currentSlide])
   
+  const scrollHandler: {
+    next?: Function
+    prev?: Function
+  } = {}
+  const getScrollHandler = (next: Function, prev: Function) => {
+    scrollHandler.next = next
+    scrollHandler.prev = prev
+  }
+
+  const scrollTo = (step: number) => {
+    switch(step) {
+      case 1:
+        scrollHandler.next ? scrollHandler.next() : null;
+        break
+      case -1:
+        scrollHandler.prev ? scrollHandler.prev() : null;
+        break
+    }
+  }
 
   return (
     <AppContianer className="flex items-center justify-start h-full w-full relative  labtop:px-[120px] ">
 
       <div className='w-[896px]'>
-      <div className='absolute top-12 labtop:right-[14rem] right-[7rem]'>
-        <div className="hero-title">Memorabilia</div>
-        <div className="subTitle-1-cn py-3 flex items-center gap-x-5">
-        <div className=" w-28 h-1 bg-theme-dark rounded"></div>
-          <div>功能特点</div>
+        <div className='absolute top-12 labtop:right-[14rem] right-[7rem]'>
+          <div className="hero-title">Memorabilia</div>
+          <div className="subTitle-1-cn py-3 flex items-center gap-x-5">
+          <div className=" w-28 h-1 bg-theme-dark rounded"></div>
+            <div>功能特点</div>
+          </div>
         </div>
-      </div>
-            {
-              data?
-              <EventsScrollView>
-              <div className='flex '>
-                {
-                  data.length>0&&data.map((g:any,index:number)=>(
-                    <div className='w-full h-[800px]  translate-y-[60px]  ' key={index}>
-                    <EventsTable tableIndex={currentSlide} data={g} ></EventsTable>
-                    </div>
-                  ))
-                }
-                </div>
-                </EventsScrollView>
-                :
-                <div>
-                  loading
+        {
+          data?
+          <div className="relative">
+            <img className='absolute top-96 -left-16 rotate-180 opacity-30 hover:opacity-100 cursor-pointer' onClick={() => scrollTo(-1)} src={Step} alt="" />
+              <EventsScrollView getScrollHandler={getScrollHandler}>
+                <div className='flex '>
+                  {
+                    data.length>0&&data.map((g:any,index:number)=>(
+                      <div className='w-full h-[800px]  translate-y-[60px]  ' key={index}>
+                      <EventsTable tableIndex={currentSlide} data={g} ></EventsTable>
+                      </div>
+                    ))
+                  }
                 </div>
-            }
-          
+              </EventsScrollView>
+            <img className='absolute top-96 -right-16 opacity-30 hover:opacity-100  cursor-pointer' onClick={() => scrollTo(1)} src={Step} alt="" />
+          </div>
+          :
+          <div>
+            loading
+          </div>
+        }
       </div>
     
     </AppContianer >