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