uniapp APP项目启动页面全屏显示去除导航栏和下巴

uniapp APP项目启动页面全屏显示去除导航栏和下巴

<template>
	<view>
		<!-- 启动图 -->
		<view class="start-item" >
			<image :src="startImg" mode="" class="pic" @click="jump(startUrl)"></image>
		</view>
	</view>
</template>

<script>
	export default {
          
   
		data() {
          
   
			return {
          
   
				startImg:,//启动图图片
				startUrl:,//启动图跳转链接
			}
		},
		onLoad(param) {
          
   
			const that = this;
			// 获取启动图
			that.getStartImg();
            //3秒后跳转至首页
			setTimeout(()=>{
          
   
				that.switchTab(/pages/index/index)
			},3000)
		},
		//设置页面全屏
		onShow() {
          
   
		    // #ifdef APP-PLUS
		    plus.navigator.setFullscreen(true);//隐藏手机顶部状态栏
		    plus.navigator.hideSystemNavigation();//隐藏手机底部导航按键
		    // #endif
		},
		//监听页面卸载事件 如果不加这句,会导致跳转到别的页面后也是全屏
		onUnload() {
          
   
		   // #ifdef APP-PLUS
		   plus.navigator.setFullscreen(false);//显示手机顶部状态栏
		   plus.navigator.showSystemNavigation();//显示手机底部导航按键
		   // #endif
		},

		methods: {
          
   
			// 获取启动图
			getStartImg() {
          
   
				const that = this;
				that.$http.get(api/index_start).then(res => {
          
   
					console.log("启动图", res);
					if (res.status_code == 200) {
          
   
						that.startImg = res.data.img;
						that.startUrl = res.data.img_url;
					} else {
          
   
						that.$tool.toast(res.message)
					}
				})
			},
			
			//跳转链接
			jump(url) {
          
   
				console.log(url);
				// #ifdef APP-PLUS
				// 判断平台  
				if (plus.os.name == Android) {
          
   
					plus.runtime.openURL(encodeURI(url),
						function(res) {
          
   
							console.log(安卓手机点击了跳转,res)
						},
					)
				} else if (plus.os.name == iOS) {
          
   
					plus.runtime.openURL(encodeURI(url),
						function(res) {
          
   
							console.log(苹果手机点击了跳转,res)
						}
					)
				}
				// #endif
				// #ifdef H5
				window.location.href = url;
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	// 启动图
	.start-item{
          
   
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;
		background-color: #FFFFFF;
	}
</style>
经验分享 程序员 微信小程序 职场和发展