feat: updagte group list & add button to swipers

src/fragments/profile/view/index.tsx

@@ -1,7 +1,6 @@
-import { Image } from '@tarojs/components';
+import { BaseEventOrig, Image, Swiper, SwiperItem, SwiperProps } from "@tarojs/components";
 import Taro from '@tarojs/taro';
 
-import { Swiper } from '@taroify/core';
 import classNames from 'classnames';
 import { useCallback, useState } from 'react';
 
@@ -16,8 +15,8 @@ import { logWithPrefix, isDesktop } from '@/utils/common';
 import { getBasicInfo, sortVideos } from '@/utils/material';
 import { navigateTo } from '@/utils/route';
 
-
 import './index.less';
+import onChangeEventDetail = SwiperProps.onChangeEventDetail;
 
 interface IProps {
   editable: boolean;
@@ -99,22 +98,20 @@ const getDataGroup = (profile: MaterialProfile | null) => {
   ];
 };
 
-
 export default function ProfileViewFragment(props: IProps) {
   const { profile, editable, onDev } = props;
   const [coverIndex, setCoverIndex] = useState(0);
   const dataGroup = getDataGroup(profile);
   const videos = sortVideos(profile?.materialVideoInfoList || []);
 
-
   const handleClickVideo = useCallback(
     (index: number) => {
       log('handleClickVideo', index);
 
       if (isDesktop) {
         navigateTo(PageUrl.MaterialWebview, {
-          source: encodeURIComponent(videos[index].url)
-        })
+          source: encodeURIComponent(videos[index].url),
+        });
       } else {
         Taro.previewMedia({
           sources: videos.map(video => ({ url: video.url, type: video.type })),
@@ -140,12 +137,31 @@ export default function ProfileViewFragment(props: IProps) {
     navigateTo(PageUrl.MaterialEditProfile, { type: groupType });
   }, []);
 
+  const videoLength = videos.length ? videos.length : 0;
+
+  const handleChange = useCallback((e: BaseEventOrig<onChangeEventDetail>)=> {
+    setCoverIndex(e.detail.current)
+  }, [])
+
+  const handlePrev = useCallback(() => {
+    setCoverIndex(coverIndex ? coverIndex - 1 : videoLength - 1);
+  }, [coverIndex, videoLength]);
+
+  const handleNext = useCallback(() => {
+    setCoverIndex(coverIndex === videoLength- 1 ? 0 : coverIndex + 1);
+  }, [coverIndex,videoLength]);
+
   return (
     <div className={PREFIX}>
       <div className={`${PREFIX}__header`}>
-        <Swiper className={`${PREFIX}__header__swiper`} onChange={setCoverIndex} stopPropagation={false} lazyRender>
+        <Swiper
+          className={`${PREFIX}__header__swiper`}
+          current={coverIndex}
+          onChange={handleChange}
+          circular
+        >
           {videos.map((cover, index) => (
-            <Swiper.Item key={cover.coverUrl}>
+            <SwiperItem key={cover.coverUrl}>
               <div className={`${PREFIX}__header__swiper-item`}>
                 <Image
                   mode="aspectFill"
@@ -162,9 +178,25 @@ export default function ProfileViewFragment(props: IProps) {
                   />
                 )}
               </div>
-            </Swiper.Item>
+            </SwiperItem>
           ))}
         </Swiper>
+        {videoLength > 1 &&
+          (<div className={`${PREFIX}__header__swiper-button__prev`} onClick={handlePrev}>
+          <Image
+            className={`${PREFIX}__header__swiper-button__image`}
+            mode="aspectFit"
+            src={require('@/statics/svg/arrow-left-thin.svg')}
+          />
+        </div>)}
+        {videoLength > 1 &&
+          (<div className={`${PREFIX}__header__swiper-button__next`} onClick={handleNext}>
+          <Image
+            className={`${PREFIX}__header__swiper-button__image`}
+            mode="aspectFit"
+            src={require('@/statics/svg/arrow-right-thin.svg')}
+          />
+        </div>)}
         {editable && (
           <div className={`${PREFIX}__header__edit-video`} onClick={handleEditVideo}>
             编辑录屏