完善览图功能

components/Photos/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState,useRef } from "react";
 import { Image, ImageViewer, Dialog } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
@@ -18,6 +18,7 @@ export default function Photos({
   const [seeAllPhotos, setSeeAllPhotos] = useState(false);
   const [currentPhotos, setCurrentPhotos] = useState([]);
   const [photos, setPhotos] = useState([]);
+  const currentIndex = useRef();
   const router = useRouter();
   const base = baseRequest();
   useEffect(() => {
@@ -56,32 +57,43 @@ export default function Photos({
     }
   }, [media]);
   const showPhotos = (photos, index) => {
+    currentIndex.current=index;
     const mediaDom = document.createElement("div");
+    mediaDom.style.width = "100vw";
     document.body.appendChild(mediaDom);
     mediaDom.className = `${
       photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
     }`;
+    const interval = setInterval(() => {
+      const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
+      if(bodyBox){
+        bodyBox.firstChild.lastChild.style.transform = `translateX(-${
+          (currentIndex.current) * (window.innerWidth + 16)
+        }px)`;
+        // console.log(bodyBox.firstChild.lastChild.style.transform);
+      }
+    }, 400);
     ImageViewer.Multi.show({
       images: photos.map((item) => item?.url),
       defaultIndex: index,
-      renderFooter: (image, index) =>
-        renderFooter(photos[index]?.type == "hid", mediaDom),
+      renderFooter: (image, index) => {
+        return renderFooter(photos[index]?.type == "hid", mediaDom);
+      },
+
       getContainer: mediaDom,
       onIndexChange: (index) => {
+        currentIndex.current=index;
         mediaDom.className = `${
           photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
         }`;
-        const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
-        setTimeout(() => {
-          bodyBox.firstChild.lastChild.style.transform=`translateX(-${index*(window.innerWidth+16)}px)`;
-          console.log(bodyBox.firstChild.lastChild.style.transform)
-        }, 600);
       },
       afterClose: () => {
         mediaDom.remove();
+        clearInterval(interval);
       },
       classNames: { body: "photos-bodyBox" },
     });
+    
   };
   const handleShowVideo = (video) => {
     Dialog.className = "videoMask";
@@ -118,7 +130,7 @@ export default function Photos({
                 poster={video?.url.src}
                 blurDataURL={video?.url.blurDataURL}
                 autoPlay={true}
-                style={{ height: "500px",width:"100vw" }}
+                style={{ height: "500px", width: "100vw" }}
               />
               {/* <Player
               src="https://www.mydomain.com/remote-video.mp4"