uniapp去掉手机状态栏 全屏展示

app.vue

onShow: function() {

console.log('App Show')

this.$nextTick(() => {

if (typeof plus !== 'undefined') {

// 隐藏状态栏(沉浸式)

plus.navigator.setFullscreen(true)

// 尝试隐藏底部系统导航栏(部分机型有效)

plus.navigator.hideSystemNavigation()

}

})

复制代码
<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-plus/index.scss";
</style>
<script>
import {  stopHeartbeat,startHeartbeat } from "./request/heartbeat";

	export default {
		onLaunch: function() {
    console.log('App Launch')
    if (typeof plus !== 'undefined') {
      plus.screen.lockOrientation('landscape-primary')
    } else {
      document.addEventListener('plusready', () => {
        plus.screen.lockOrientation('landscape-primary')
      })
    }
  },
		onShow: function() {
			console.log('App Show')
			this.$nextTick(() => {
      if (typeof plus !== 'undefined') {
        // 隐藏状态栏(沉浸式)
        plus.navigator.setFullscreen(true)

        // 尝试隐藏底部系统导航栏(部分机型有效)
        plus.navigator.hideSystemNavigation()
      }
    })
		},
		onHide: function() {
			console.log('App Hide')
		},
		// App 关闭或页面退出时停止心跳
		onUnload() {
  		  stopHeartbeat()
  }
	}
</script>

<style lang="scss">
	@import "/static/iconfont/iconfont.css";
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';
	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
</style>

manifest.json里面配置

复制代码
{
  "app-plus": {
    "statusbar": {
      "immersed": true,
      "style": "dark",
      "background": "#000000"
    }
  }
}

最后就可以全屏了#

相关推荐
程序猿的程9 小时前
开源一个 React 股票 K 线图组件,传个股票代码就能画图
前端·javascript
不爱说话郭德纲10 小时前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
大雨还洅下10 小时前
前端JS: 虚拟dom是什么? 原理? 优缺点?
javascript
唐叔在学习10 小时前
[前端特效] 左滑显示按钮的实现介绍
前端·javascript
青青家的小灰灰11 小时前
深入理解事件循环:异步编程的基石
前端·javascript·面试
前端Hardy12 小时前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
前端Hardy12 小时前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
UIUV13 小时前
node:child_process spawn 模块学习笔记
javascript·后端·node.js
烛阴14 小时前
Three.js 零基础入门:手把手打造交互式 3D 几何体展示系统
javascript·webgl·three.js
颜酱15 小时前
单调栈:从模板到实战
javascript·后端·算法