From 8899b66b0c66d1d73092b23eeac221700b6cb2f4 Mon Sep 17 00:00:00 2001 From: al Date: Tue, 13 Aug 2024 13:41:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/page.js | 26 +++++++++++--- components/Photos/index.js | 73 ++++++++++++++++++++++++-------------- 2 files changed, 68 insertions(+), 31 deletions(-) diff --git a/app/page.js b/app/page.js index f886594..c21c924 100644 --- a/app/page.js +++ b/app/page.js @@ -207,10 +207,10 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => { const [followPostList, setFollowPostList] = useState([]); const [currentTime, setCurrentTime] = useState(); const [offset, setOffset] = useState(0); - const [ids, setIds] = useState([]); + const ids = useRef(null) useEffect(() => { getFollowIds().then((res) => { - setIds(res); + ids.current=res; getFollowPostList(res, 0); }); }, []); @@ -229,10 +229,10 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => { // }); // throw new Error("刷新失败"); // getRecommPostList(1); - await getFollowPostList(ids, 0); + await getFollowPostList(ids.current, 0); } async function loadMore() { - await getFollowPostList(ids, offset); + await getFollowPostList(ids.current, offset); // const newList = [...followPostList, ...list]; // setFollowPostList(newList); } @@ -250,6 +250,14 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => { return data; }; const getFollowPostList = async (data, offset) => { + console.log("ids", data); + if(!offset){ + window.scrollTo({ + top: 0, + left: 0, + behavior: "smooth", // 可选，平滑滚动效果 + }); + } if (data.data.list.length > 0) { //查关注主播展示资料 const followsResponse = await requireAPI( @@ -276,7 +284,15 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => { // position: "top", // }); } else { - setFollowPostList((old) => [...old, ...followsResponse.data.list]); + + setFollowPostList((old) => { + if(followsResponse.data.offset==4){ + + return followsResponse.data.list; + }else{ + return [...old, ...followsResponse.data.list] + } + }); } } else { setLoading(false); diff --git a/components/Photos/index.js b/components/Photos/index.js index 85db502..ae68976 100644 --- a/components/Photos/index.js +++ b/components/Photos/index.js @@ -36,15 +36,15 @@ export default function Photos({ type: "img", url: item.urls?.[0], // fullwidth:item.w>item.h， - w:item.w, - h:item.h, + w: item.w, + h: item.h, })); let videoArr = media.videos.map((item) => ({ type: "video", url: item.cover_urls?.[0], mp4: item.urls?.[0], - w:item.cover_w, - h:item.cover_h, + w: item.cover_w, + h: item.cover_h, // fullwidth:item.cover_w>item.cover_h })); let arr = [...imgArr, ...videoArr]; @@ -60,6 +60,8 @@ export default function Photos({ mp4: newPhotos[0]?.type === "video", url: newPhotos[0]?.url, type: "hid", + w: newPhotos[0]?.w, + h: newPhotos[0]?.h, }; }); } @@ -71,15 +73,15 @@ export default function Photos({ setCurrentPhotos(newPhotos); } }, [media]); - useEffect(()=>{ + useEffect(() => { // window.addEventListener('resize', (e)=>{ // // alert(window.innerHeight) // setMaskHeight(window.innerHeight) // }); - return ()=>{ + return () => { // window.removeEventListener("resize") - } - },[]) + }; + }, []); const showPhotos = (photos, index) => { currentIndex.current = index; const interval = setInterval(() => { @@ -144,7 +146,7 @@ export default function Photos({ photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" }`; // mediaDom.appendChild(btns); - document.body.style.overflow = 'hidden'; + document.body.style.overflow = "hidden"; ImageViewer.clear(); ImageViewer.Multi.show({ images: photos.map((item) => item?.url), @@ -159,25 +161,29 @@ export default function Photos({ 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 + 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); - document.body.style.overflow = 'auto'; + document.body.style.overflow = "auto"; }, classNames: { body: "photos-bodyBox" }, }); @@ -216,6 +222,7 @@ export default function Photos({ ) ); }} + style={{ marginTop: "calc(-85px )" }} > 此内容暂未解锁，立即解锁 @@ -226,7 +233,9 @@ export default function Photos({ <>
1 ? "grid grid-cols-3 gap-1.5 min-h-[24vw]" : "w-max" + currentPhotos.length > 1 + ? "grid grid-cols-3 gap-1.5 min-h-[24vw]" + : "auto" }`} > {currentPhotos.map((item, index) => { @@ -266,12 +275,24 @@ export default function Photos({ placeholder={
} - width={currentPhotos.length > 1 ? "24vw" : item.w>item.h?`calc(100vw - 72px - 2rem)`:`calc(46vw * ${item.w/item.h})`} - height={currentPhotos.length > 1 ? "24vw" : item.w>item.h? `calc((100vw - 72px - 2rem) * ${item.h/item.w})`:"46vw"} + width={ + currentPhotos.length > 1 + ? "24vw" + : item.w > item.h + ? `calc(100vw - 72px - 2rem)` + : `calc(46vw * ${item.w / item.h})` + } + height={ + currentPhotos.length > 1 + ? "24vw" + : item.w > item.h + ? `calc((100vw - 72px - 2rem) * ${item.h / item.w})` + : "46vw" + } className={`rounded max-w-full ${ item?.type == "hid" && type == "space" ? "imageBlur" : "" }`} - fit={currentPhotos.length > 1?"cover":"contain"} + fit={currentPhotos.length > 1 ? "cover" : "contain"} src={item?.url} />