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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐