Merge branch 'main' of gitlab.33.cn:Website/web2022

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,6 +24,25 @@ 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] ">
@@ -36,7 +57,9 @@ export const Memorabilia = () => {
         </div>
         {
           data?
-              <EventsScrollView>
+          <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)=>(
@@ -47,12 +70,13 @@ export const Memorabilia = () => {
                   }
                 </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 >