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-07 19:02:47 +08:00
parent c518cb9226
commit b1a65c4822
2 changed files with 123 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/profile/[mid]/page.js
View File

@ -36,6 +36,7 @@ export default function PersonSpace() {
const [visible, setVisible] = useState(false);
const [isFollow, setIsFollow] = useState(false);
const [topPhotos, setTopPhotos] = useState([]);
const currentIndex = useRef();
// 获取屏幕高度
// const scrollHeight = 600;
useEffect(() => {
@ -44,9 +45,69 @@ export default function PersonSpace() {
getRelationData();
}, []);
const showPhotos = (photos, index) => {
currentIndex.current = index;
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);
handleShowImages(index, photos, interval);
// setVisible(true)
// console.log(imagesMaskRef.current);
// imagesMaskRef.current.show(
// photos.map((item) => item?.url),
// index
// );
};
const handleShowImages = (index, photos, interval) => {
const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom);
mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`;
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==photos.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 handleGetStreamerInfo = async () => {

63
app/space/person_space_introduce/[mid]/page.js
View File

@ -23,6 +23,7 @@ export default function PersonSpaceIntroduce() {
const [visible, setVisible] = useState(false);
const [data, setData] = useState(null);
const [isLoading, setIsloading] = useState(true);
const currentIndex = useRef();
const { mid } = useParams();
useEffect(() => {
if (contentBox.current) {
@ -39,9 +40,69 @@ export default function PersonSpaceIntroduce() {
});
}, []);
const showPhotos = (photos, index) => {
currentIndex.current = index;
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);
handleShowImages(index, photos, interval);
// setVisible(true)
// console.log(imagesMaskRef.current);
// imagesMaskRef.current.show(
// photos.map((item) => item?.url),
// index
// );
};
const handleShowImages = (index, photos, interval) => {
const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom);
mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`;
ImageViewer.clear();
ImageViewer.Multi.show({
images: photos.map((item) => item.urls[0]),
images: photos.map((item) => item?.urls[0]),
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==photos.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) => {