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-12 21:31:50 +08:00
parent 7103f22de2
commit 4c4eb60a3d
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/layout.js
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import React from "react"; import React, { useEffect } from "react";
import { usePathname } from "next/navigation";
import "./globals.css"; import "./globals.css";
import BottomNav from "../components/BottomNav"; import BottomNav from "../components/BottomNav";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
@ -31,6 +32,17 @@ const metadata = {
// userScalable: 0, // userScalable: 0,
// }; // };
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
const pathname = usePathname();
useEffect(()=>{
const timer = setTimeout(() => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth", // 可选，平滑滚动效果
});
clearTimeout(timer);
}, 100);
},[pathname])
return ( return (
<html <html
lang="zh-CN" lang="zh-CN"
@ -72,7 +84,7 @@ export default function RootLayout({ children }) {
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
{/* <!-- 用来定义顶部状态栏的形式默认是default为白色 black为黑色 black-translucent为灰色半透明（会占据屏幕的约20px，不同的设备可能会有差异）--> */} {/* <!-- 用来定义顶部状态栏的形式默认是default为白色 black为黑色 black-translucent为灰色半透明（会占据屏幕的约20px，不同的设备可能会有差异）--> */}
{/* <!-- 在定义了apple-mobile-web-app-capable的前提下，设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效； --> */} {/* <!-- 在定义了apple-mobile-web-app-capable的前提下，设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效； --> */}
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
{/* <!-- apple-touch-startup-image用来配置启动动画 --> */} {/* <!-- apple-touch-startup-image用来配置启动动画 --> */}
{/* <!-- 这里要注意，这里图片的尺寸要和设备的静态图片显示尺寸完全对应，差一个像素都会导致启动动画无法显示 --> */} {/* <!-- 这里要注意，这里图片的尺寸要和设备的静态图片显示尺寸完全对应，差一个像素都会导致启动动画无法显示 --> */}
{/* <!-- 下面列举了iPhone的所有尺寸（ps:为了方便大家就全部贴出来了！！） --> */} {/* <!-- 下面列举了iPhone的所有尺寸（ps:为了方便大家就全部贴出来了！！） --> */}
@ -199,7 +211,7 @@ export default function RootLayout({ children }) {
)} )}
{/* <Provider store={store}>{children}</Provider> */} {/* <Provider store={store}>{children}</Provider> */}
</main> </main>
<footer className="fixed left-0 w-screen bg-black"> <footer className="fixed bottom-0 w-screen bg-black">
<div> <div>
<BottomNav /> <BottomNav />
</div> </div>

4
app/page.js
View File

@ -36,7 +36,6 @@ export default function Home() {
const [activeIndex, setActiveIndex] = useState(0); const [activeIndex, setActiveIndex] = useState(0);
const [scrollHeight, setScrollHeight] = useState(0); const [scrollHeight, setScrollHeight] = useState(0);
const childrenFunc = () => { const childrenFunc = () => {
if (!activeIndex) { if (!activeIndex) {
recommPostRef.current?.doRefresh(); recommPostRef.current?.doRefresh();
@ -163,7 +162,8 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
} }
}; };
return ( return (
<div className="px-4 pb-20 max-h-screen overflow-y-auto"> // <div className="px-4 pb-20 max-h-screen overflow-y-auto">
<div className="px-4 pb-20 min-h-screen">
<List> <List>
{loading && !commenPostList.length && ( {loading && !commenPostList.length && (
<div> <div>

5
utils/tools/handleFuns.js
View File

@ -52,10 +52,11 @@ export const handleShowVideo = (video) => {
Dialog.className = "videoMask"; Dialog.className = "videoMask";
Dialog.show({ Dialog.show({
title: "", title: "",
bodyStyle:{paddingTop:0},
content: ( content: (
<div className="h-screen flex justify-center items-center relative" > <div className="h-screen flex justify-center items-center relative" >
<div className="h-screen w-screen absolute" onClick={() => Dialog.clear()}></div> <div className="h-screen w-screen absolute" onClick={() => Dialog.clear()}></div>
<div className="w-screen flex flex-col gap-2 -mt-24 absolute pointer-events-none"> <div className="w-screen flex flex-col gap-2 pointer-events-none absolute top-0">
<div className="flex w-full justify-end"> <div className="flex w-full justify-end">
<div <div
className="pointer-events-auto flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full" className="pointer-events-auto flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
@ -84,7 +85,7 @@ export const handleShowVideo = (video) => {
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: "calc(100vh - 250px)" }}
/> />
{/* <Player {/* <Player
src="https://www.mydomain.com/remote-video.mp4" src="https://www.mydomain.com/remote-video.mp4"