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"
    }
  }
}

最后就可以全屏了#

相关推荐
Yvonne爱编码8 小时前
JAVA数据结构 DAY6-栈和队列
java·开发语言·数据结构·python
Re.不晚8 小时前
JAVA进阶之路——无奖问答挑战1
java·开发语言
Daniel李华8 小时前
echarts使用案例
android·javascript·echarts
北原_春希8 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS8 小时前
echarts天气折线图
javascript·vue.js·echarts
你这个代码我看不懂8 小时前
@ConditionalOnProperty不直接使用松绑定规则
java·开发语言
尽意啊8 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜8 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive8 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…8 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts