修复闪烁问题
This commit is contained in:
al
parent
a227f2103a
commit
057c6e5704
|
|
@ -7,11 +7,11 @@ import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import baseRequest from "@/utils/baseRequest";
|
import baseRequest from "@/utils/baseRequest";
|
||||||
import Player from "next-video/player";
|
import Player from "next-video/player";
|
||||||
import dynamic from 'next/dynamic'
|
// import dynamic from 'next/dynamic'
|
||||||
// import ImagesMask from "@/components/ImagesMask";
|
// import ImagesMask from "@/components/ImagesMask";
|
||||||
const ImagesMask = dynamic(() =>
|
// const ImagesMask = dynamic(() =>
|
||||||
import('@/components/ImagesMask'), { ssr: false }
|
// import('@/components/ImagesMask'), { ssr: false }
|
||||||
)
|
// )
|
||||||
export default function Photos({
|
export default function Photos({
|
||||||
isUnlocked,
|
isUnlocked,
|
||||||
mediaVisibleRange,
|
mediaVisibleRange,
|
||||||
|
|
@ -67,103 +67,104 @@ export default function Photos({
|
||||||
}, [media]);
|
}, [media]);
|
||||||
const showPhotos = (photos, index) => {
|
const showPhotos = (photos, index) => {
|
||||||
currentIndex.current = index;
|
currentIndex.current = index;
|
||||||
// const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
// const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
|
console.log("bbbbbb")
|
||||||
// if (bodyBox) {
|
const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
|
||||||
// bodyBox.firstChild.lastChild.style.transform = `translateX(-${
|
if (bodyBox) {
|
||||||
// currentIndex.current * (window.innerWidth + 16)
|
bodyBox.firstChild.lastChild.style.transform = `translateX(-${
|
||||||
// }px)`;
|
currentIndex.current * (window.innerWidth + 16)
|
||||||
// // console.log(bodyBox.firstChild.lastChild.style.transform);
|
}px)`;
|
||||||
// }
|
// console.log(bodyBox.firstChild.lastChild.style.transform);
|
||||||
// }, 400);
|
}
|
||||||
|
}, 400);
|
||||||
|
|
||||||
// 添加左右切换按钮
|
// 添加左右切换按钮
|
||||||
// const btns = document.createElement("div");
|
const btns = document.createElement("div");
|
||||||
// btns.className = "imagesBtnsControllers";
|
btns.className = "imagesBtnsControllers";
|
||||||
// const btnL = document.createElement("div");
|
const btnL = document.createElement("div");
|
||||||
// btnL.className = "imagesBtnsControllerLeft";
|
btnL.className = "imagesBtnsControllerLeft";
|
||||||
// btnL.addEventListener("click", () => {
|
btnL.addEventListener("click", () => {
|
||||||
// if (currentIndex.current > 0) {
|
if (currentIndex.current > 0) {
|
||||||
// currentIndex.current = currentIndex.current - 1;
|
currentIndex.current = currentIndex.current - 1;
|
||||||
// handleShowImages(currentIndex.current, photos, btns,interval);
|
handleShowImages(currentIndex.current, photos, btns,interval);
|
||||||
// if (!currentIndex.current) {
|
if (!currentIndex.current) {
|
||||||
// btnL.style.opacity = 0.5;
|
btnL.style.opacity = 0.5;
|
||||||
// btnR.style.opacity = 1;
|
btnR.style.opacity = 1;
|
||||||
// } else {
|
} else {
|
||||||
// btnR.style.opacity = 1;
|
btnR.style.opacity = 1;
|
||||||
// btnL.style.opacity = 1;
|
btnL.style.opacity = 1;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// });
|
});
|
||||||
// const btnR = document.createElement("div");
|
const btnR = document.createElement("div");
|
||||||
// btnR.className = "imagesBtnsControllerRight";
|
btnR.className = "imagesBtnsControllerRight";
|
||||||
// btnR.addEventListener("click", () => {
|
btnR.addEventListener("click", () => {
|
||||||
// if (currentIndex.current < currentPhotos.length - 1) {
|
if (currentIndex.current < currentPhotos.length - 1) {
|
||||||
// currentIndex.current = currentIndex.current + 1;
|
currentIndex.current = currentIndex.current + 1;
|
||||||
// handleShowImages(currentIndex.current, photos, btns,interval);
|
handleShowImages(currentIndex.current, photos, btns,interval);
|
||||||
// if (currentIndex.current == currentPhotos.length - 1) {
|
if (currentIndex.current == currentPhotos.length - 1) {
|
||||||
// btnR.style.opacity = 0.5;
|
btnR.style.opacity = 0.5;
|
||||||
// btnL.style.opacity = 1;
|
btnL.style.opacity = 1;
|
||||||
// } else {
|
} else {
|
||||||
// btnR.style.opacity = 1;
|
btnR.style.opacity = 1;
|
||||||
// btnL.style.opacity = 1;
|
btnL.style.opacity = 1;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// });
|
});
|
||||||
// btns.append(btnL, btnR);
|
btns.append(btnL, btnR);
|
||||||
// handleShowImages(index, photos, btns,interval);
|
handleShowImages(index, photos, btns,interval);
|
||||||
|
|
||||||
// setVisible(true)
|
// setVisible(true)
|
||||||
console.log(imagesMaskRef.current);
|
// console.log(imagesMaskRef.current);
|
||||||
imagesMaskRef.current.show(
|
// imagesMaskRef.current.show(
|
||||||
photos.map((item) => item?.url),
|
// photos.map((item) => item?.url),
|
||||||
index
|
// index
|
||||||
);
|
// );
|
||||||
};
|
};
|
||||||
// const handleShowImages = (index, photos, btns) => {
|
const handleShowImages = (index, photos, btns,interval) => {
|
||||||
// const mediaDom = document.createElement("div");
|
const mediaDom = document.createElement("div");
|
||||||
// mediaDom.style.width = "100vw";
|
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"
|
||||||
// }`;
|
}`;
|
||||||
// mediaDom.appendChild(btns);
|
mediaDom.appendChild(btns);
|
||||||
// ImageViewer.clear();
|
ImageViewer.clear();
|
||||||
// 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) => {
|
||||||
// return renderFooter(photos[index]?.type == "hid", mediaDom);
|
return renderFooter(photos[index]?.type == "hid", mediaDom);
|
||||||
// },
|
},
|
||||||
|
|
||||||
// getContainer: mediaDom,
|
getContainer: mediaDom,
|
||||||
// onIndexChange: (index) => {
|
onIndexChange: (index) => {
|
||||||
// currentIndex.current = 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 leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
|
const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
|
||||||
// const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
|
const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
|
||||||
// if(leftBtn && rightBtn){
|
if(leftBtn && rightBtn){
|
||||||
// if(!index){
|
if(!index){
|
||||||
// leftBtn.style.opacity=0.5
|
leftBtn.style.opacity=0.5
|
||||||
// rightBtn.style.opacity=1
|
rightBtn.style.opacity=1
|
||||||
// }else if(index==currentPhotos.length-1){
|
}else if(index==currentPhotos.length-1){
|
||||||
// leftBtn.style.opacity=1
|
leftBtn.style.opacity=1
|
||||||
// rightBtn.style.opacity=0.5
|
rightBtn.style.opacity=0.5
|
||||||
// }else{
|
}else{
|
||||||
// leftBtn.style.opacity=1
|
leftBtn.style.opacity=1
|
||||||
// rightBtn.style.opacity=1
|
rightBtn.style.opacity=1
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
// afterClose: () => {
|
afterClose: () => {
|
||||||
// mediaDom.remove();
|
mediaDom.remove();
|
||||||
// // clearInterval(interval);
|
clearInterval(interval);
|
||||||
// },
|
},
|
||||||
// classNames: { body: "photos-bodyBox" },
|
classNames: { body: "photos-bodyBox" },
|
||||||
// });
|
});
|
||||||
// };
|
};
|
||||||
const handleShowVideo = (video) => {
|
const handleShowVideo = (video) => {
|
||||||
Dialog.className = "videoMask";
|
Dialog.className = "videoMask";
|
||||||
Dialog.show({
|
Dialog.show({
|
||||||
|
|
@ -362,7 +363,7 @@ export default function Photos({
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<ImagesMask ref={imagesMaskRef} />
|
{/* <ImagesMask ref={imagesMaskRef} /> */}
|
||||||
{/* <Viewer
|
{/* <Viewer
|
||||||
visible={visible}
|
visible={visible}
|
||||||
onClose={() => { setVisible(false); } }
|
onClose={() => { setVisible(false); } }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue