当前位置：首页 > uni-app

uniapp 页面全屏

2026-02-06 00:20:26uni-app

设置页面全屏的方法

在 UniApp 中实现页面全屏可以通过以下几种方式实现，具体取决于应用场景（H5、小程序或App）。

使用 CSS 实现全屏

通过 CSS 样式强制让页面占据整个视口，适用于 H5 和部分平台的小程序。

.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

调用系统全屏 API（H5）

在 H5 环境中，可以通过浏览器提供的全屏 API 实现全屏效果。

// 进入全屏
function requestFullscreen() {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

小程序全屏配置

在小程序中，可以通过页面配置或组件属性实现全屏效果。例如，在 pages.json 中配置页面样式：

{
  "path": "pages/fullscreen/page",
  "style": {
    "navigationStyle": "custom",
    "disableScroll": true,
    "app-plus": {
      "titleView": false
    }
  }
}

App 端全屏设置

在 App 端（如 Android 和 iOS），可以通过原生配置实现全屏。在 pages.json 中配置：

{
  "path": "pages/fullscreen/page",
  "style": {
    "navigationBarHidden": true,
    "fullScreen": true,
    "app-plus": {
      "statusbar": {
        "immersed": true
      }
    }
  }
}

使用 UniApp 的 API

UniApp 提供了 uni.setNavigationBarTitle 和 uni.hideNavigationBarLoading 等 API，可以动态控制导航栏和状态栏的显示。

// 隐藏导航栏
uni.hideNavigationBarLoading();

// 动态设置全屏（部分平台支持）
uni.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#000000',
  animation: {
    duration: 0,
    timingFunc: 'linear'
  }
});