处理布局不同步错位问题和视频高度
This commit is contained in:
al
parent
7103f22de2
commit
4c4eb60a3d
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
import { Inter } from "next/font/google";
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import "./globals.css";
|
||||
import BottomNav from "../components/BottomNav";
|
||||
import { Provider } from "react-redux";
|
||||
|
|
@ -31,6 +32,17 @@ const metadata = {
|
|||
// userScalable: 0,
|
||||
// };
|
||||
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 (
|
||||
<html
|
||||
lang="zh-CN"
|
||||
|
|
@ -72,7 +84,7 @@ export default function RootLayout({ children }) {
|
|||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
{/* <!-- 用来定义顶部状态栏的形式默认是default为白色 black为黑色 black-translucent为灰色半透明（会占据屏幕的约20px，不同的设备可能会有差异）--> */}
|
||||
{/* <!-- 在定义了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用来配置启动动画 --> */}
|
||||
{/* <!-- 这里要注意，这里图片的尺寸要和设备的静态图片显示尺寸完全对应，差一个像素都会导致启动动画无法显示 --> */}
|
||||
{/* <!-- 下面列举了iPhone的所有尺寸（ps:为了方便大家就全部贴出来了！！） --> */}
|
||||
|
|
@ -199,7 +211,7 @@ export default function RootLayout({ children }) {
|
|||
)}
|
||||
{/* <Provider store={store}>{children}</Provider> */}
|
||||
</main>
|
||||
<footer className="fixed left-0 w-screen bg-black">
|
||||
<footer className="fixed bottom-0 w-screen bg-black">
|
||||
<div>
|
||||
<BottomNav />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ export default function Home() {
|
|||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
const [scrollHeight, setScrollHeight] = useState(0);
|
||||
|
||||
const childrenFunc = () => {
|
||||
if (!activeIndex) {
|
||||
recommPostRef.current?.doRefresh();
|
||||
|
|
@ -163,7 +162,8 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
|
|||
}
|
||||
};
|
||||
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>
|
||||
{loading && !commenPostList.length && (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -52,10 +52,11 @@ export const handleShowVideo = (video) => {
|
|||
Dialog.className = "videoMask";
|
||||
Dialog.show({
|
||||
title: "",
|
||||
bodyStyle:{paddingTop:0},
|
||||
content: (
|
||||
<div className="h-screen flex justify-center items-center relative" >
|
||||
<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="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}
|
||||
blurDataURL={video?.url.blurDataURL}
|
||||
autoPlay={true}
|
||||
style={{ height: "500px", width: "100vw" }}
|
||||
style={{ height: "calc(100vh - 250px)" }}
|
||||
/>
|
||||
{/* <Player
|
||||
src="https://www.mydomain.com/remote-video.mp4"
|
||||
|
|
|
|||
Loading…
Reference in New Issue