wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善览图功能

This commit is contained in:
al 2024-08-05 18:04:26 +08:00
parent ec868c0d20
commit 0a64774413
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/Photos/index.js
View File

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