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-PLUSplus.navigator.setFullscreen(true);//隐藏手机顶部状态栏plus.navigator.hideSystemNavigation();//隐藏手机底部导航按键// #endif},//监听页面卸载事件 如果不加这句，会导致跳转到别的页面后也是全屏onUnload() {// #ifdef APP-PLUSplus.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 H5window.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>

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

android 启动视频,android 启动页面全屏播放视频
有时候大家在启动软件的时候,会看到有一个比较炫酷的短视频,觉得很有意思,现在做项目的时候也遇到了,跟大家分享一下. 首先,在 res 目录下建一个文件夹 raw, 把你的视频文件(.mp4等)放进去. ...
蒙版遮住全屏（包括导航栏）
UIWindow * window = [UIApplication sharedApplication].windows[0]; UIView *backgroundView = [[UIView ...
解决 Android APP 启动页白屏问题及如何实现全屏显示
目录一.白屏原因分析二.解决白屏方案方案一.提供 .png 背景图方案二.使用 Layout-list 制作背景 1. 制作替代白屏的背景:bg_splash.xml 2. 将 bg_spl ...
dialog 刘海屏、水滴屏、全面屏全屏显示
// 关键代码 Window window = dialog.getWindow();if (window != null) {window.setFlags(WindowManager.Layout ...
Fullscreen API 全屏显示网页
Fullscreen API 全屏显示网页第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrom ...
uniapp 背景图片全屏显示在整个页面
要让uniapp中的背景图片全屏,可以在<style>标签中添加以下样式: page {background-image: url('/static/bg.jpg');background ...
android启动时加载引导图片并全屏显示
前言:最近在做一个项目,项目要求app启动时加载引导图片,由于经验不足(技术一般般),在设计时踩了几个坑,不过好在最终也是做了出来,下面我把我的想法和步骤列一下,希望可以帮到各位新手android程序 ...
Android APP全屏显示（去掉顶部状态栏和底部虚拟导航栏）以及使用AndroidAutoSize实现自适应
全屏显示 1.AndroidManifest设置APP样式android:theme,我项目中的Activity都是继承自Activity,如果是继承自AppCompatActivity,这里样式需要 ...
使用JAVASCRIPT进行全屏显示页面，就像触摸屏显示效果
使用JAVASCRIPT进行全屏显示页面,就像触摸屏显示效果 <script type="text/javascript"> window.onload ...

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

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

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

最新文章

热门文章