H5-横屏提示显示组件

web_icon

已于 2023-05-11 13:53:56 修改

阅读量449

点赞数

分类专栏： H5 react 文章标签： javascript react.js 前端

于 2023-04-17 17:52:48 首次发布

本文链接：https://blog.csdn.net/wangling0108/article/details/130205715

版权

react 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

该文章介绍了如何利用ReactHooks来封装一个横屏显示提示的兼容组件。通过监听`orientationchange`事件，结合状态管理，自动判断设备方向并在横屏时显示提示，同时处理了PC和移动端的屏幕滚动问题。

摘要由CSDN通过智能技术生成

一、基于react-hooks封装横屏显示提示兼容组件

二、效果展示图

三、封装的代码、直接引入根路由、一键兼容使用

一、基于react-hooks封装横屏显示提示兼容组件

二、效果展示图

三、封装的代码、直接引入根路由、一键兼容使用

import React, { useEffect, useState } from "react";
import utils from "../../../utils/utils";
import "./index.less";

const LandscapeMessage = () => {
  const [isLandscape, setIsLandscape] = useState(false);

  const handleOrientationChange = () => {
    setIsLandscape(
      (window.orientation === 90 || window.orientation === -90) && !utils.IsPC()
    );
 // 禁止屏幕滑动，并隐藏滚动条
    if (isLandscape && !utils.IsPC()) {
        document.body.style.overflow = "hidden";
        document.documentElement.style.overflow = "hidden";
        document.body.style.touchAction = "none";
      } else {
        document.body.style.overflow = "auto";
        document.documentElement.style.overflow = "auto";
        document.body.style.touchAction = "auto";
      }
    
  };

  useEffect(() => {
    handleOrientationChange();
    window.addEventListener("orientationchange", handleOrientationChange);

    return () =>
      window.removeEventListener("orientationchange", handleOrientationChange);
  }, []);

  return (
    <div
      id="landscape-message"
      style={{ display: isLandscape ? "block" : "none" }}
    >
      <div className="conents_page">
        <img
          className="landscape_icon"
          src="https://images.artvrpro.com/images/image/landscape.png"
          alt=""
        />
        <h3 className="title">请将设备旋转至竖屏模式体验</h3>
      </div>
    </div>
  );
};

export default LandscapeMessage;

#landscape-message{ 
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    z-index: 999;
    .conents_page{ 
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 20px;

        .landscape_icon{ 
            width: 100px;
        }

        .title{ 
            color: rgb(245, 239, 239);
        }
    }
    
}