uniapp-设置全屏

news2024/11/25 8:19:51

需求:就是想要小程序不受限制,可以把图片或者文字全屏的展示,如下图

 vue代码如下:

<template>
	<view class="content">
		<image class="image-bg" src="/static/logo.png" />
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				title: 'Hello',
				statusBarHeight: 20,
				richText: '',
			}
		},
		onLoad() {

		},
		methods: {

		},
	}
</script>

<style>
	.content {
		background-color: #ddd;
		height: 520rpx;
		position: relative;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-bg {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
	}


	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

主要代码如下:

在pages.json里添加navigationStyle,这样就可以不受限全屏展示了

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/718964.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python GUI编程利器:Tkinker中的微调节器和滑块(6)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 和猫妹学Python&#xff0c;一起趣味学编程。 今日目标 实现下面效果&#xff1a; 微调节器(Spinbox类) 微调节器可以通过箭头调整所需的数值。 创建微调节器对象语法格式…

ChatGPT助力校招----面试问题分享(十)

1 ChatGPT每日一题&#xff1a;阻抗匹配的方法有哪些 问题&#xff1a;阻抗匹配是什么 ChatGPT&#xff1a;阻抗匹配是一种电路设计技术&#xff0c;用于确保电路中各个组件之间的电阻、电感和电容等参数相互匹配&#xff0c;以最大程度地传输信号或功率 当阻抗不匹配时&…

7/2~7/4学习成果总结

这几天初步的了解了一下Java&#xff0c;然后写了几道题&#xff1a; 下面总结一下学Java的时候遇到的一易错的小问题以及总结&#xff1a; 1. java里面只能在一个源文件里有一个public类&#xff0c;但是入口main那个可以理解为public static是一个整体也就是不属于public&a…

『C/C++养成计划』C++中的静态库和动态库|GCC|Makefile|CMake学习

C中的静态库和动态库|GCC|Makefile|CMake学习&#xff01; 文章目录 一. 什么是库二. 静态库1.1. 静态库生成1.2. 静态库制作举例1.2.1 准备测试程序1.2.2 生成静态库 1.3. 静态库的使用 三. 动态库3.1. 为什么需要动态库3.2. 生成动态链接库3.3. 动态库制作举例3.4. 动态库的…

【JUC并发编程】Callable接口创建线程

一、介绍 与继承Thread类和实现Runnable接口两种创建线程方式的区别 ① Callable接口可以有返回值 ② Callable接口可以抛出异常 ③ 执行方法不同&#xff0c;call()方法和run()方法 二、代码演示 继承Thread类和实现Runnable接口的方式创建线程 package callable;import java…

celery Periodic Tasks 周期任务

celery Periodic Tasks 周期任务 https://docs.celeryq.dev/en/latest/userguide/periodic-tasks.html /home/mike/work/celery-5.3.1/examples/periodic-tasks myapp.py """myapp.pyUsage::# The worker service reacts to messages by executing tasks.(w…

pip安装指定包,找不到如何解决?

背景&#xff1a;现如今&#xff0c;在跑神经网络的时候&#xff0c;需要配置一些开源项目从而需要指定一些特定环境是必不可少的一个步骤&#xff0c;但是很多时候使用pip安装包的时候&#xff0c;总是找不到需要的版本。比如&#xff0c;今天需要配置open3d 0.15.1版本的环境…

群晖 nas 升级内存 手记(DS423+)

题外话&#xff1a; 我原来用的是群晖DS218&#xff0c;也用了5年了&#xff0c;今年5月份突然不能开机了&#xff0c;感觉故障不大&#xff0c;群晖官方又不好联系&#xff0c;非常麻烦。只好邮递到北京一家所谓的维修群晖的维修点&#xff0c;他们说维修费最多不超过200元&am…

Visual studio 快捷键(个人记录加深印象)

1、CtrlK 后 Ctrlx 插入代码片段快捷键&#xff08;或 编辑”>“IntelliSense”>“插入代码片段&#xff09; 注&#xff08;摘抄&#xff09;&#xff1a;该列表包含用于创建类、构造函数、for 循环、if 或 switch 语句等的代码片段

java定义数组的三种类型总结

三种定义数组的格式如下&#xff1a; int[] arr1new int[10]; int[] arr2{1,2,3,6}; int[] arr3new int[]{1,2,3,4,5,6,7,22}; 注意&#xff1a;数组的length是一个属性&#xff0c;而字符串的length()是一个方法了&#xff01;&#xff01;&#xff01;虽然都是求的他们各…

自定义 MVC 框架思想

目录 一、MVC设计模式 1. 什么是MVC 2. 三层架构与MVC的区别 二、自定义MVC框架 1. 为什么要学习自定义MVC框架 2. 自定义MVC的工作原理 3. 自定义MVC框架的优势 三、自定义MVC实例流程 1. mvc三层架构的弊端 2. 自定义MVC的工作流程 2.1 子控制器&#xff08;…

【flutter滑动拼图验证码】

Java后台使用aj_captcha插件&#xff0c;提供/captcha/get&#xff08;获取captcha底图和拼块图片&#xff09;、/captcha/check&#xff08;验证拼图偏移量&#xff09;这两个接口。并且这个插件在GitHub上有源码。 1.先准备好aj_captcha的工具类&#xff1a; import dart:co…

Linux指令与权限

本期我们来学习Linux的权限内容 目录 Linux权限 1.认识Linux下用户的分类 2.什么是权限 3.没有权限是什么现象 4.权限的修改问题 chmod chown chgrp umask 粘滞位 file指令 我们在使用xshell登录后&#xff0c;会有下面的东西 我们来介绍一下&#xff0c;以我的登录…

19. WebGPU —计算着色器(compute shader)

WebGPU 是即将推出的 Web API&#xff0c;可提供对GPU的底层控制并用于通用目的计算任务 。 我对计算机图形不是很有经验。我通过阅读有关如何使用 OpenGL 构建游戏引擎的教程了解了 WebGL 的点点滴滴&#xff0c;并通过观看 Inigo Quilez 在 ShaderToy 上仅使用着色器而不使用…

最长连续序列

题目链接 最长连续序列 题目描述 注意点 0 < nums.length < 100000不要求序列元素在原数组中连续 解答思路 要想实现时间复杂度为 O(n) 的算法解决此问题&#xff0c;关键是数字不能多次遍历&#xff0c;所以首先要对数组进行去重&#xff1b;然后为什么防止某个元素…

NSS [HNCTF 2022 WEEK2]ez_ssrf

NSS [HNCTF 2022 WEEK2]ez_ssrf 先拿dirsearch扫一下。 访问/flag.php 访问/index.php 应该是从index.php传参,ssrf然后访问到flag.php。 因此构造poc.php: <?php $out "GET /flag.php HTTP/1.1\r\n"; $out . "Host: 127.0.0.1\r\n"; $out . "…

网络关键设备和网络安全专用产品目录-2023年7月

2023年7月3日&#xff0c;网络关键设备和网络安全专用产品目录&#xff08;一级&#xff09;终于更新了&#xff0c;增加到38类&#xff0c;大家想了解每类产品对应哪家检测机构、以及涉及相关的标准、分解的二级产品目录&#xff0c;可以联系龙域认证客服。 一、网络关键设备…

01_面向对象的设计原则

面向对象的设计原则 参考资料&#xff1a; 视频书籍 《设计模式&#xff1a;可复用面向对象软件的基础》 简介 面对复杂问题如何解决&#xff1f; 分解&#xff1a;分而治之&#xff0c;大问题分解成小问题。抽象&#xff1a;忽视非本质的细节&#xff0c;处理泛化和理想化…

交换排序--冒泡排序和快速排序

交换&#xff0c;是指根据序列中两个元素关键字的比较结果来对换这两个记录在序列中的位置 一&#xff0c;冒泡排序 1.基本思想&#xff1a;从后往前&#xff08;或从前往后&#xff09;两两比较相邻元素的值&#xff0c;若为逆序&#xff08;A[i-1] > A[i]&#xff09;&a…

Vivado创建IP核步骤

0、创建一个LED IP核 1、打开Vivado&#xff0c;点击Tasks栏的Manage IP&#xff0c;在弹出的选项框中选中New IP Location... 2、在弹出的界面选择Next 3、在弹出的界面中进行IP核的属性配置&#xff0c;修改系所属的器件和保存路径&#xff0c;其他的保持默认就行&#xff0…